Disabling Arrow Down/Up keys - not working with event.stopImmediatePropagation()

Tags: #<Tag:0x00007efc6570b9b8> #<Tag:0x00007efc6570b878>
#1

I have an autocomplete popup that opens when a user starts a cell with ‘#’. When the popup is open, I want to scroll the popup options when ArrowUp or ArrowDown is pressed (instead of going to the above/below cells in HOT).

I am using ev.stopImmediatePropagation() within beforeKeyDown() to achieve this. However, it doesn’t work. The popup scrolls - but, the event gets propagated and the active cell also changes.

Here is a snippet showing how ev.stopImmediatePropagation() isn’t working.

https://codesandbox.io/p/sandbox/clever-tree-pphk62?file=%2Fsrc%2Findex.js%3A34%2C25

How do you resolve this issue?

#2

Hi @sandeep.muthangi

Can you resend the demo? It shows me ‘Sandbox not found’.

#3

Can you try now please

https://codesandbox.io/p/sandbox/clever-tree-pphk62?file=%2Fsrc%2Findex.js%3A34%2C25

#4

Thank you for the demo, @sandeep.muthangi

Did you consider using the ShortcutManager? Here https://handsontable.com/docs/javascript-data-grid/custom-shortcuts/ is an example on how to use it. Here, https://handsontable.com/docs/javascript-data-grid/custom-shortcuts/#remove-a-keyboard-shortcut is the API to remove a shortcut.

Since we introduced the manager some of the operations for keys are cannot be done using the beforeKeyDown hook.

#5

I’ll try and keep you posted.

#6

This works. Thanks.

1 Like
#7

Thank you for the update @sandeep.muthangi

I’m closing this thread as solved.

#8