Docs

Docs

Dialog Recipes

Examples that combine Dialog features to solve common use cases.

This page contains examples that combine Dialog features to solve common use cases.

Keyboard Shortcuts Flow

Modal dialogs close when the user presses Escape. You can turn this off with setCloseOnEsc(false), for example when closing would discard unsaved input.

To let Enter submit the dialog, add a click shortcut to the primary button and scope it to the dialog. When a footer button has focus, Enter activates that button, so stop the key event there to avoid triggering the primary action as well:

Source code
Java
saveButton.addClickShortcut(Key.ENTER).listenOn(dialog); 1

Shortcuts.addShortcutListener(dialog, () -> {}, Key.ENTER)
        .listenOn(cancelButton, saveButton) 2
        .allowBrowserDefault();

  1. Enter clicks the Save button while focus is anywhere inside the dialog.

  2. Enter on a focused footer button only activates that button. Shortcuts stop the event from propagating by default, and allowBrowserDefault() keeps the button’s own Enter handling.

See Add Keyboard Shortcuts for more about shortcuts.