Dialog with Grid closes on escape when interacting with cell

[evgeni-uv]

Description

I have a dialog with a grid inside. When navigating by keyboard and pressing enter on a cell with focusable component, the interaction with it begins. Users who navigate only by keyboard, can now not return to cell-navigation, because pressing escape closes the dialog.

Expected outcome

I expect escape to return the focus from the cell-component to the cell itself for navigation. When escape is pressed again, the dialog should close.

Minimal reproducible example

Grid grid = new Grid<>();
grid.addComponentColumn(Button::new);
grid.setItems("Test1", "Test2");
grid.setAllRowsVisible(true);

Dialog dialog = new Dialog();
dialog.add(grid);

Button button = new Button("Open", e -> dialog.open());

add(button);

Steps to reproduce

Navigate the grid by keyboard. Press enter on the cell with a button. The button should receive the focus. Now press escape, and the dialog closes.

Environment

Vaadin version(s): 24.7
OS: Windows 11

Browsers

Chrome

[DiegoCardoso]

Hi, thanks for the ticket. I was able to confirm this behavior.

We probably need to stop event propagation here:
https://github.com/vaadin/web-components/blob/1a10749844496ab9ff4a8a747519941aa1a8b3c8/packages/grid/src/vaadin-grid-keyboard-navigation-mixin.js#L647-L654