Vaadin 14 Grid in non-buffered mode exit editor - vaadin

Question

I've created a custom field in Vaadin14 that displays a grid and two buttons (add row / clear grid). This custom field is displayed in a CRUD editor, editor that in turn has tabs.
For creating the grid with editor I've used the example shown here https://vaadin.com/docs/v14/ds/components/grid in the "Non-buffered" section.
Everything works as expected except for the addCloseHandler(Component, Editor). In the example shown above the code for the close handler method is this one:
textField.getElement().addEventListener("keydown", e -> editor.cancel()).setFilter("event.code === 'Escape'");
which closes the editor when pressing the Esc key or clicking outside the cell that's in edit mode.
My problem is that, given the grid with the editor are inside a CRUD form when I'm hitting Esc the CRUD discard changes form is being shown instead of the editor closing. Also, when clicking outside the edited cell nothing happens.
I believe this is due to the "event.code" in the setFilter method being incorrect but I'm unsure how to determine what is the proper event code that's being triggered in my case.
I tried changing the event from "keydown" to "focusout" which led to the callback method being called when I clicked outside the cell that was being edited but nonetheless the editor did not close (I.e. the cell was stuck in edit mode). I also tried calling editor.close() inside the callback method but with no success.

Answer 1

From https://vaadin.com/docs/v14/ds/components/grid in the "Non-buffered" section:
In the example below, double-click a row to start editing. Press
Escape, or click on a different row to stop editing.
This kotlin code has exactly the same behavior
var clickRegistration :Registration? = null
fun addCloseHandler(field: Component, editor: Editor<*>) {
field.element.addEventListener("keydown") { event ->
editor.cancel()
clickRegistration?.remove()
}.filter = "event.key === 'Escape'"
}
grid.addItemDoubleClickListener { e: ItemDoubleClickEvent<DataSet?> ->
editor.editItem(e.item)
val editorComponent = e.column.editorComponent
if (editorComponent is Focusable<*>) {
(editorComponent as Focusable<*>).focus()
}
clickRegistration = grid.addItemClickListener { event ->
editor.cancel()
clickRegistration?.remove()
}
}

Answer 2

You must use event.key not event.code:
getElement().addEventListener("keydown", event -> editor.cancel())
.setFilter("event.key === 'Escape' || event.key === 'Esc'");