v139 · dom

'request-close' Invoker Command

Dialog elements can be closed through a variety of mechanisms, sometimes developers want to have the ability to prevent closure. To achieve this dialogs fire a cancel event. Originally this was only fired via a close request (e.g. ESC key press), recently a `requestClose()` JS function was added which also fires the cancel event. The '

concepts

  1. Dialog Cancel Button

    Click the cancel button to fire the dialog's cancel event before closing. Replaces the dialog.close() + cancel-event-dispatch dance with a single declarative command.

  2. Form Guard

    A form with unsaved changes uses the cancel event to preventDefault() and keep the dialog open. Demonstrates that request-close respects the same intercept hook as the ESC key.

  3. Declarative Confirm Flow

    An editor dialog with two buttons: declarative request-close for Cancel (guarded by a dirty-form check) and close for Save. Live event log shows the cancel ↔ close ordering.

  4. Nested Dialogs

    Three dialogs — info, form, and a guarded delete dialog — each wired with command="request-close". The delete dialog intercepts cancel and opens a guard; an event log shows every cancel and close event fired.

why it shipped

Invoker commands exposes existing dialog and popover functions to declarative HTML, for consistency we should also expose the new requestClose().

references