Disabling keyboard shortcut

Getting help Questions
, ,
1

I already read this thread: Keyboard shortcuts disabling
but event.stopImmediatePropagation(); does not work like intended since it stop for others elements only and not all elements including the table.

My configuration looks like this:

beforeKeyDown: function(event) {
    if (event['ctrlKey'] && event['key'] === 'x') {
        event.stopImmediatePropagation();
    }
}

Thanks for the help

2

Hi @a.eckenberg

the event.key is a single key at the time of registration.

In the case when you’d like to use a key combination, you should save the latest key (for example in a variable lastKey) and then check for “X” and lastKeykey within the hook’s condition.

Here’s an example https://jsfiddle.net/handsoncode/yq1dec5o/

3

Thanks for the exemple, I understand what you are saying but in your exemple the log saying the key has been blocked appears but the value is still deleted from the table :thinking:

4

You’re right @a.eckenberg

I think that I should investigate it a bit further. Generally we have API to add/alter/remove keyboard shortcuts at https://handsontable.com/docs/javascript-data-grid/keyboard-shortcuts/#remove-a-keyboard-shortcut. But CTRL/CMD + X is handler by the browser. Then, in this case we will use e.preventDefault(). Here’s the updated demo https://jsfiddle.net/handsoncode/hpa2gs3k/1/.

It is not perfect thought. If user holds CMD/CTRL and click X again they will be able to delete the value. So based on that you can add a condition to check if the key was released.

Let me know if that works for you.

ps. thank you for this ticket, it made me realize that we have some lacks in the documentation.

5

I created an issue on our internal ticketing board to add the copyPaste-related shortcuts to the shortcut Manager, as it seems to be a bug (we say in. the documentation that you can control copy-paste shortcuts over the ShortcutManager).

I will write here as soon as we fix it.

1 Like
6

I’m bit late to respond sorry about that but after some investigation your exemple for disabling CTRL/CMD + X works as intended but for some weird reason CTRL + ALT + X does not.

beforeKeyDown: function(event) {
    if (event['ctrlKey'] || event['metaKey']) {
        // We use angularJS and the scope has two variable to store ctrl and alt states (pressed or not)
        $scope.isCtrlPressed = true;
    } else {
        $scope.isCtrlPressed = false;
    }
    if (event['altKey']) {
        $scope.isAltPressed = true;
    } else {
        $scope.isAltPressed = false;
    }
    // Until here it works as intended
    if ($scope.isCtrlPressed && $scope.isAltPressed && event['key'] === 'x') {
        // We enter in this function like intended but
        event.preventDefault(); // <--- This line does not prevent the selected cell from being cut
        return false; // <----- neither this one
    }
}

I’d be interested in a workaround if there is one or if I’ve missed something, please let me know.
In any case, thanks for your help.

7

Hi @a.eckenberg

hm… it seems to be the same code as mine. Did you check if the $scope.isCtrlPressed && $scope.isAltPressed && event['key'] === 'x' is correctly executed when user uses Ctrl/Cmd + X shortcut?

Ps. Can you check if

event.preventDefault();
event.stopImmediatePropagation();
return false;

makes any difference?

8

If we only press Ctrl + X we do not enter the branch but it is intended since we don’t want to disable ctrl + x but just ctrl + alt + x.

stopImmediatePropagation does not change a thing

9

During my tests for the Ctrl/Cmd + Alt + X is seems that we open cell editor with a blank value instead of cutting the value. However, it may change on your device. I am testing the https://jsfiddle.net/handsoncode/efh0p14a/ on Chrome 117 on macOS Ventura (here’s Alt and Option on the same key).

Do you get the CopyPaste.cut when you use the Ctrl/Cmd + Alt + X shortcut or cell goes into edit mode?

10

The cell goes into edit mode

11

It seems that the below trigger cell edit mode with an empty editor.

Cmd + Alt + any letter
Ctrl + Alt + any letter

on Chrome/macOS

so it doesn’t have to be Ctrl + Alt + X, it can be Ctrl + Alt + B and it will end up with the same result.

And when I use Alt and then X, the X via beforeKeyDown hook no longer is event.key === 'x' but that - also - might be related to system/browser settings. Using polish language in my case the event.key after running Ctrl + Alt + X is Ĺş.

53
53918Ă—604 145 KB

If that works the same for you (that the key changes) maybe it’s better to use the event.code instead - this does not change.

12

I understand what you are saying but if this was the issue it should not go in the if branch is it ? What I m getting from your answer is that the key is not X but if it was the case the event should not stop propagation but I have an other event handler somewhere else and it’s not triggered until I remove the return false; or the event.stopImmediatePropagation();

13

Yes, that was one of my questions before

35
35804Ă—152 22.1 KB

but if you say that the code executes, we’d need to look for the solution elsewhere. Let me check that. I thought that maybe that’s a general input erase shortcut but it’s not.

14

Hi @a.eckenberg

Aleksandra asked to do some testing here, and in my case when I used the logic you provided here:

beforeKeyDown: function(event) {
    if (event['ctrlKey'] || event['metaKey']) {
        // We use angularJS and the scope has two variable to store ctrl and alt states (pressed or not)
        $scope.isCtrlPressed = true;
    } else {
        $scope.isCtrlPressed = false;
    }
    if (event['altKey']) {
        $scope.isAltPressed = true;
    } else {
        $scope.isAltPressed = false;
    }
    // Until here it works as intended
    if ($scope.isCtrlPressed && $scope.isAltPressed && event['key'] === 'x') {
        // We enter in this function like intended but
        event.preventDefault(); // <--- This line does not prevent the selected cell from being cut
        return false; // <----- neither this one
    }
}

I was able to block the action for CMD + ALT (Option) + X. We’d like to take a look at it together, so maybe we can set up a quick call and see if we can find solution then? If you are interested in this option, let us know about your availability and time zone at support@handsontable.com

15

Thanks @adrian.szymanski for the proposition but it is not such a big deal for us. We will put this aside for the moment.

16

Hi @a.eckenberg

Of course, I understand. We will test it further and see if we’ll be able to find a solution for this.

1 Like