Trapping key commands in dropdown to prevent other event listeners on page from firing

[PixelJanitor]

We have a list of items in an "Inbox" type of view that have arrow up/down commands to navigate the list via addEventListeners. When a Radix dropdown or dialog is open on the same page and navigated via up/down arrows, the inbox highlights continue to work. Is there a way in the dropdown and dialog components to trap all keyboard events in them while the dropdown is open? Thanks

[benoitgrelard]

Hey @PixelJanitor,

Ideally the list navigation should be scoped to the list, but given your question I am thinking it is not and instead uses some kind of global keydown listener?

If you have control over it, I would recommend scoping the keydown listener to the list as it then doesn't require anything special to counter the issues with global events. Here's an example:

Focus the counter, and press up/down to increment it (representing the list interaction):

https://codesandbox.io/p/sandbox/dropdownmenu-global-keydown-events-v99pg3

Failing that, if you can't for some reason or don't have access to that, you'll have to tangle the logic a little.
You could either:

• caveat the global handlers and check you are not focused within a dropdown menu for example (if you have access to the global handler)
• stop propagation on up/down arrow keys in your dropdown menu

Here's an example of the latter:

https://codesandbox.io/p/sandbox/dropdownmenu-local-keydown-events-forked-900w3e

Hopefully that helps, let me know if I've misunderstood.

✌️

[kof]

I worked this around by scheduling the onSelect callback call and waiting until onSelectAutoFocus is called.
https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/app/builder/features/style-panel/style-source/style-source.tsx#L147

[benoitgrelard]

That's a different question than the original, not really connected.
Yours is more about orchestration of focus between on item selection vs. close autofocus.
This is what we usually recommend: https://codesandbox.io/s/contextmenu-custom-focus-on-action-28e6cl?file=/src/App.js

[kof]

So the solution is to call preventDefault() inside onCloseAutoFocus so one can focus anything else 🙏

[benoitgrelard]

Yes, essentially whenever you have a need, you can prevent our built-in behaviour (focusing the trigger back for DropdownMenu for example) and run your own focusing logic instead.

On your earlier point of:

OnSelect on menu items fires too early, if you focus an input, it will take focus back

With my explanation above now it probably makes a bit more sense to you. Technically it doesn't fire "too early".

• you select an item
• this causes the dropdown to close
• then focus is moved back (onCloseAutoFocus)

Hence why the correct orchestration is to to prevent onCloseAutoFocus and run your own whenever you want.

✌️