Escape as a click shortcut close the dialog when an overlay is opened

[jcgueriaud1]

Description

When I open an overlay in a dialog and press Escape it closes the overlay, not the dialog.
If I add a button in the dialog with button.addClickShortcut(Key.ESCAPE); then sometimes it closes the overlay only, sometimes the dialog and the overlay.

• DatePicker: close both
• TimePicker: close only the overlay
• Popover: in Vaadin 24.8 closes only the overlay. In Vaadin 24.9 closes both
• Select: close both
• Combobox: close only the overlay

Expected outcome

• first Esc press should close the overlay
• the second one should close the dialog

ComboBox / TimePicker work as expected, likely because they call stopPropagation() for the keydown event

Popover: in Vaadin 24.8 closes only the overlay. In Vaadin 24.9 closes both

Sounds like a regression from the recent change to use global listeners.

Minimal reproducible example

@Route("dialog-demo")
@PageTitle("Dialog Demo")
@Menu(order = 1, icon = "vaadin:list-select", title = "Dialog Demo")
class DialogDemoView extends Main {

    DialogDemoView() {
        setSizeFull();
        var combo = new MultiSelectComboBox<String>("Select items");

        combo.setItems("Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6");
        add(new ViewToolbar("MultiSelect Demo"));
        add(combo);

        Dialog dialog = new Dialog();
        dialog.setCloseOnEsc(true);

        TextField field = new TextField("Search date range");
        field.setWidth("340px");
        Icon icon = LumoIcon.DROPDOWN.create();
        field.setSuffixComponent(icon);

        var popover = new Popover();
        popover.setCloseOnEsc(true);
        popover.setWidth("340px");
        popover.setAriaLabel("Select a date range");
        popover.setTarget(field);
        popover.add(new Span("Dummy data"));

        Shortcuts.addShortcutListener(field, popover::open, Key.ARROW_DOWN)
                .listenOn(field);

        Select<String> select = new Select<>();
        select.setItems("Item 1", "Item 2", "Item 3", "Item 4", "Item 5");
        dialog.setModal(false);
        Button button = new Button("Close", e -> dialog.close());
        button.addClickShortcut(Key.ESCAPE);
        dialog.add(combo,
                new DateTimePicker(),
                new DatePicker(),
                field, select, button
        );
        dialog.open();
        add(dialog, new Button("open", e -> dialog.open()));
    }
}

Steps to reproduce

• Open the dialog
• Open an overlay
• Press Escape

Environment

Vaadin version(s): 24.9.4

Browsers

No response

[web-padawan]

Confirmed the issue both on V25 and V24.9 so the issue is not related to recent overlay changes.
The problem goes away when commenting out the line with button.addClickShortcut(Key.ESCAPE);.

Tested with date-picker and was able to workaround this by changing global keydown event listener to use capture so that it is triggered earlier, and then calling stopPropagation() for the sourceEvent from vaadin-overlay-escape-press listener.

Without capture phase it doesn't work, so Flow listener is likely triggered too early, which might be a problem in general with the way how click shortcuts are implemented - that can in theory manifest in other components.

However, changing keydown listener to use capture phase might require bigger changes in web components, as we generally rely on the way how events bubble so that they can be e.g. prevented before reaching the document.

[web-padawan]

Updated vaadin-date-picker and vaadin-select to stop event propagation for Esc press in V25:

• refactor: update date-picker Escape logic to stop propagation web-components#10477
• refactor: update select Escape logic to stop propagation web-components#10482

This makes sense because field components are generally always open on top of everything (they are implicitly modal).
So pressing Esc should always close their respective overlays, same as it does for e.g. vaadin-time-picker.

However, vaadin-popover is different and we still want to keep using vaadin-overlay-escape-press there.

Workaround: add keydown listener to vaadin-popover-overlay and call stopPropagation().