[DismissableLayer] since Escape key is handled on document level it breaks if parent element also listens for Esc

[misha-erm]

Hello,

Recently I've found out that Escape key is handled seprately for components like DropdownMenu and event handler for it is attached to document instead of a Content element.

Imagine a scenario where DropdownMenu is rendered inside a Parent component which also listens to escape and closes itself. How would I properly stop event propagation and close only DropdownMenu since doing something like <DropdownMenu.Content onKeyDown={(e)=>e.stopPropagation()} breaks it completely ?

Thanks in advance for any tips

Originally posted by @MikeYermolayev in #2644

[misha-erm]

dropdown menu is inside our own primitive Panel which is a regular div, neither portalled nor floating

The panel has onKeyDown handler which listens for "Esc". So when you press Esc with dropdown opened it first bubbles up to panel and never reaches the document.

Probably the way we've done it is not the best and that's us who should move the logic from div to document as well, but still I'd like to get a clear understanding of it. Shouldn't radix listen for Esc in capturing phase?

[benoitgrelard]

Hey @misha-erm that seems sensible yes, if we listen in capture phase, it would enable you to call stopPropagation in onEscapeKeyDown. I agree this might be a symptom of something else in your app, that said, seems like a harmless change on our side which could help people, I will prepare a fix.

[david-crespo]

Hi! Just wanted to flag oxidecomputer/console#2557 as a real-world issue caused (I think) by the capture: true. I have a combobox inside of a dialog, and I want an escape keypress while focusing the combobox to close the combobox options without closing the dialog. With capture: true here, the dialog escape handler fires first, which doesn't give the combobox a chance to handle it first and preventDefault so that the dialog doesn't close.