javascripthtmlgoogle-chromedialog

Prevent <dialog> from closing on keydown Esc in Chrome

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).

Solution

  • You can try to use cancel event: MDN

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

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