Dialog Dismissal

Dialogs can be dismissed in the following ways:

• Manually, by the user pressing the ESC key
• Programmatically, by calling HTMLDialogElement#close with an optional return value.

You can listen for the default gesture (typically [ENTER]) by registering for the submit event on the form:

function onsubmit(e) {
    dialog.close("ok");
    e.preventDefault();
}
form.onsubmit = onsubmit;

You should also register a click handler for your "OK" and "Cancel" buttons:

const cancelButton = document.querySelector("#cancel");
cancelButton.addEventListener("click", () => dialog.close("reasonCanceled"));

const okButton = document.querySelector("#ok");
okButton.addEventListener("click", e => {
    onsubmit();
    e.preventDefault();
});

You can listen for the dialog's dismissal using the close event on the dialog:

dialog.addEventListener("close", () => {
    // dialog is closed at this point
});

Preventing Dialog Dismissal

You can, in some cases, prevent a dialog dismissal. If the form calls preventDefault on the submit event, the dialog will fail to dismiss.