[DismissableLayer] why Escape key is handled on document level?

[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

[jjenzz]

it's on the document level for a11y reasons, if a dropdown menu is inside a dialog, pressing escape should only close the dropdown and pressing it again wld close the dialog.

radix manages this layering for you but if it isn working, you've likely stumbled upon this bug #1088

[misha-erm]

unfortunately dropdown menu is not inside radix's dialog component, it's 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?

[jjenzz]

oh interesting! yes, on the surface it sounds like radix shld capture 🤔 feel free to create an issue for that. the team will know more—i've not been close to the project recently.

[benoitgrelard]

Closing, addressed in #2653