In shadow DOM, keyboard not working for Select menu #34061
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
When Select menu (and its popover) is displayed within a shadow DOM, arrow keys have no effect.
Expected behavior 🤔
Arrow keys should select menu items.
(I'm not sure to what extent shadow DOM is supported, but it seems to be mostly working otherwise.)
Steps to reproduce 🕹
Steps:
- Load https://codesandbox.io/s/hopeful-noether-88fukr
- This renders a React root into a shadow DOM, and also puts the Emotion styles there using an Emotion CacheProvider.
- Inside it is a Select menu with disablePortal=true (so it can use the styles).
- Click the Select menu so its popover appears.
- Press one of the arrow keys. The selection doesn't change.
Context 🔦
Rendering a MUI app entirely within a web component's shadow DOM.
Your environment 🌎
CodeSandbox