Prevent moving cells via arrow keys?

Tags: #<Tag:0x00007f8b23db4f88>
#1

Hi there. I came across Handsontable about a week ago and have been trying to integrate it into our environment.

I have been trying to implement a dynamic select (like select2) for any given cell. I’ve been using beforeKeyDown to capture keystrokes and send some data to the server, and then render some results on the screen. I want to use the up and down arrows to iterate through the results shown on the screen.

Here is my issue (you can reproduce this on a simple hot):
If you double click a cell to edit it, the cursor is sort of captured by the .hansontableInput textarea, and moving the up and down arrow keys doesn’t lose focus on the current cell. I can capture the arrows in beforeKeyDown and act on them, everything is great.

If you “walk up to a cell” by moving to it with the arrow keys, then start typing to initiate an edit, if you move up or down on the arrow keys the cell commit and will lose focus, unlike if you double clicked it. I have no problem with this default behavior, I just want to be able to prevent it on certain cells. If I e.preventDefault() on beforeKeyDown and return, it still moves. It’s like there is some hook event that I’m unaware of that I can’t override when it comes to moving the cells with the arrow keys.

Interestingly, if I throw a random error in beforeKeyDown, it doesn’t move cells. I can do what I want, then throw the error, and it functions fine, but it fills the console up with errors.

Is there a way I can prevent arrow moving cells gracefully? Maybe a hook event that I’m unaware of?

Thanks!

#2

I think that you can find e.stopImmediatePropagation() better for this example.

I have tried to use getSelected, afterSelectionEnd and afterSelection to get the cell for the IF statement but for ArrowUp and ArrowDown keys are returning the previously selected cell.

So to prevent the event for some particular cells the shortest way would be to add +1 to index after using ArrowDown and -1 for the ArrowUp key. What is also important is to stop adding/subtracting when a user uses the same key twice.

Let me know if I have lost my self in the explanation and if I haven’t does it work in your project.

#3

e.stopImmediatePropagation() did the trick! Thank you very much.

#4

You’re welcome. I am happy I could help.

#5