Prevent <dialog> from closing on keydown Esc in Chrome

Question

Google Chrome closes <dialog> elements when Esc is pressed. Seems to be reacting to keydown.

Firefox does not. This is the expected behavior, as closing on any key press is easy to implement.

How to make Google Chrome leave dialogs open on Esc?

Please see fiddle https://jsfiddle.net/zeqo7kaf/1/

I have implemented window's, document's, body's, dialog's key events (up, down and pressed) to prevent propagation, however it seems to me that this is above dom events.

(in order to see dialogs in Firefox, go to about:config and set property dom.dialog_element.enabled to true).

Answer 1

You can try to use cancel event: MDN

dialog.addEventListener('cancel', (event) => {
    event.preventDefault();
});

Modified JSFiddle: https://jsfiddle.net/7et3hf8p/

Answer 2

React Solution

Since the cancel/close events fire after the fact, I got this working by adding a keydown listener to the document itself.

const handleKeyDown = (e) => {
  if (e.key !== 'Escape') return;
  if (!allowDialogDismiss) e.preventDefault();
}

useEffect(() => {
  document.addEventListener('keydown', handleKeyDown);

  return () => {
    document.removeEventListener('keydown', handleKeyDown);
  };
}, [allowDialogDismiss]);

The dialog doesn't dismiss on ESC key press anymore.

---

I have a text input inside the dialog and pressing ESC by mistake would mean losing the text input before it is saved. This worked. I change the allowDialogDismiss state depending on the input's text.