Closing notifications with Escape?

Flow
1

I’ve added a close button with an addClickShortcut(Key.ESCAPE) to my Notification.
First press doesn’t seem to do anything, but 2nd press closes the dialog.

If I have something else in my application that listens on Escape, I would expect it to get the 2nd keypress as well…

Looking in the browser tools, I don’t see any request on the 1st press either, which indicates that it is swallowed on the client-side.

Any idea?

2

Can you show some of your code ? or a piece of it ?

3 
    private static void buildAndOpen(String caption, Type type) {
        
        var notification = new com.vaadin.flow.component.notification.Notification();
        notification.addThemeVariants(type.style);
        notification.setPosition(type.position);
        notification.setDuration(type.duration);
        
        Div text = new Div(caption);

        Button closeButton = new Button(VaadinIcon.CLOSE.create());
        closeButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
        closeButton.setAriaLabel(Translator.forPrincipal().translate("BTN_CLOSE"));
        closeButton.addClickShortcut(Key.ESCAPE);
        
        closeButton.addClickListener(event -> {
            notification.close();
        });

        HorizontalLayout layout = new HorizontalLayout(text, closeButton);
        layout.setAlignItems(Alignment.CENTER);

        notification.add(layout);
        notification.open();    
    }
4

I suspected maybe it was the vaadin devtools, but I’ve checked our production build, and same happens there

5

I’m not sure what’s wrong, but I tried to recreate something similar, and it’s working fine for me both on Firefox and Chrome. I can close notification by pressing escape even when a dialog is opened.
Can you try the same example code.
FYI I’m using Vaadin 24.3.12

@PageTitle("Notifications")
@Route(value = "notification", layout = MainLayout.class)
@PermitAll
public class NotificationView extends VerticalLayout {
    public NotificationView() {
        var dialogButton = new Button("Open Dialog", click -> createDialogWithNotification().open());
        add(createButtonThatOpensNotification(), dialogButton);
    }

    private Dialog createDialogWithNotification() {
        return new Dialog(createButtonThatOpensNotification());
    }

    private Button createButtonThatOpensNotification() {
        return new Button("Open notification", click -> createClosableNotification().open());
    }

    private Notification createClosableNotification() {
        var notification = new Notification();
        notification.addClassName("no-padding");

        var notificationContent = new Div("This is content of notification");
        notificationContent.addClickListener(click -> notification.close());
        notificationContent.getStyle().setPadding("var(--lumo-space-wide-l)");

        Button closeButton = new Button(VaadinIcon.CLOSE.create());
        closeButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
        closeButton.addClickShortcut(Key.ESCAPE);

        closeButton.addClickListener(event -> {
            notification.close();
        });

        notification.add(new HorizontalLayout(notificationContent, closeButton));
        return notification;
    }
}
6

Sorry for late reply. I’ve been on vacation.

Now that I picked it up again, I apparently tested in a slightly different way, and it initially worked, and then it stopped working again :(

I believe maybe the issue is with our custom ComboBox-like field. It too has an Escape keyboard shortcut to close the suggestions panel.
However, the problem is still that neither of the two listeners get the 1st keypress

I’m unable to reproduce the problem with a stripped down version, so I think I’ll have to put it aside for now.