demo · v132

Cancel a close from beforetoggle

A <dialog> can now veto its own dismissal. When beforetoggle fires with newState: "closed", calling preventDefault() keeps it open — perfect for “unsaved changes” guards on Escape, backdrop click, and form-method="dialog" submits.

checking support…

edit note

 
dlg.addEventListener("beforetoggle", (e) => {
  if (e.newState !== "closed") return;
  if (guard.checked && note.value.trim() !== "") {
    e.preventDefault();          // <- cancels the close, dialog stays open
  }
});

see also