sl-dialog stopPropagation of Escape

[mrbrahman]

Hi,

The default behavior of sl-dialog Escape closes the dialog, which is good. However, after the close, I would like to stop propagating the Esc press, as there are other elements listening to Escape as well.

How can I achieve this?

Thanks.

[KonnorRogers]

You should be able to do this using by adding a direct listener onto the dialog and stopping the propagation yourself.

Something like this:

 dialog.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && dialog.open) {
      e.stopImmediatePropagation()
      dialog.hide()
    }
  })

https://codepen.io/paramagicdev/pen/oNrEdeJ?editors=1000

The other option if you control the other event listeners is adding composedPath checks that make sure sl-dialog isn't part of the composedPath.

[mrbrahman]

Thanks for the answer!

Just to understand more, how does this actually work? Does this new event listener overwrite the default one from sl-dialog?

[KonnorRogers]

Correct. The default one on sl-dialog is bound to the document and not the dialog itself. I haven't tested too thoroughly if it'll miss cases where the document.activeElement is outside of dialog.