Share example of overriding keycode in editor

Tags: #<Tag:0x00007efc64ee22a0>
#1

I have a custom editor which contains an input control. By default, when the editor opens, the input control has focus and I can type as expected. I want to look for /use the “enter” key for a special function…but right now, this causes cell to close. If I physically click into the input control and then use the enter key, it’s fine.

I found on this page https://handsontable.com/docs/7.3.0/tutorial-cell-editor.html that you can register onKeyDown event within the editor and maybe suppress the grid function?

Do you have an example which shows how to setup a custom editor , such that the enter key on an input focus could be processed locally and not have this close/save the editor?

Also note, I did try this in the grid. This does effectively stop the Enter key from closing/saving…however, in my editor component, I can no longer get/detect the event.keyCode===13 which I need to do for my logic.

I need a way to block default behavior in grid, but allow Enter key to be accessible within my component. Is this possible?

beforeKeyDown: (event) => {
if (event.code === ‘Enter’ ) {
event.stopImmediatePropagation();
}
},

#2

Hi @mhennessy7

The following code

beforeKeyDown: (event) => {
if (event.code === ‘Enter’ ) {
event.stopImmediatePropagation();
}
},

is a recommended way to block the default behavior. Demo https://jsfiddle.net/vd0am4hb/ I would also add the this.getActiveEditor()._opened (boolean) to let you know if the editor is already closed or not + getActiveEditor is an object that can be filled with any given property. It means that you can use this property to treat your custom editor differently than the default cell type.

#3

As mentioned, the beforeKeyDown logic stops the “Enter” key from being programatically accessible from within my custom editor. In my case, my editor has an input, and when they click “enter”, I want to capture this to execute some logic…so within my editor, I have

const onKeyPressHandler =(e) => {
if(e.keyCode===13) {
…do some logic
}
}
This never fires when I use the beforeKeyDown logic.

You mentioned getActiveEditor . How /where could I use this to get the desired outcome I’m looking for? Namely that within my editor I an listen/react to the “enter” key event?

#4

The getActiveEditor is a core method. You can use it within the body of the beforeKeyDown hook. If the beforeKeyDown DOES NOT point out to the custom editor you can call the event.stopImmediatePropagation() and skip it for your editor.

#5