[select] Fix keyboard navigation while rendering in shadow DOM

[xBlizZer]

• I have followed (at least) the PR section of the contributing guide.

This pull request fixes issues with focus handling and keyboard navigation in the Select component, when used within a ShadowDOM. It ensures that keyboard interactions work as expected.

Also, this PR is based on work from #46775, and I want to give a shoutout to the original author. That PR was unfortunately closed, and since it became inactive, I decided to open this new one.

This PR fixes #34061

---

Before: https://stackblitz.com/edit/github-lvftcg7k-cvmzq3ha?file=src%2Fmain.tsx
After: https://stackblitz.com/edit/lw79g65z-whah7neb?file=src%2Fmain.tsx

[mui-bot]

Netlify deploy preview

https://deploy-preview-47380--material-ui.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	▼-112B(-0.02%)	🔺+4B(0.00%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against ea8697b

[ZeeshanTamboli]

Why to make changes in FocusTrap file if the issue is for Select?

[xBlizZer]

We need to change the FocusTrap because otherwise, when the Select opens, items don’t get focused automatically.

Select → Menu → Popover → Modal → FocusTrap

[ZeeshanTamboli]

@xBlizZer Thanks for the pull request. But I tried with the PR preview build https://pkg.pr.new/mui/material-ui/@mui/material@918977526ccfd5ea5d4ec6d95e53d30bb1c7f65c but it is not working as expected. See https://stackblitz.com/edit/lw79g65z?file=src%2Fmain.tsx

[xBlizZer]

@xBlizZer Thanks for the pull request. But I tried with the PR preview build https://pkg.pr.new/mui/material-ui/@mui/material@918977526ccfd5ea5d4ec6d95e53d30bb1c7f65c but it is not working as expected. See https://stackblitz.com/edit/lw79g65z?file=src%2Fmain.tsx

@ZeeshanTamboli Why isn’t this working as expected? It should behave exactly like a Select without ShadowDOM. If you’re using MenuItem without values, everything gets marked and the last item ends up hovered. That’s must be the same behavior as a regular Select without Shadow DOM - if that’s what you were going for.

[ZeeshanTamboli]

@xBlizZer Thanks for the pull request. But I tried with the PR preview build https://pkg.pr.new/mui/material-ui/@mui/material@918977526ccfd5ea5d4ec6d95e53d30bb1c7f65c but it is not working as expected. See https://stackblitz.com/edit/lw79g65z?file=src%2Fmain.tsx

@ZeeshanTamboli Why isn’t this working as expected? It should behave exactly like a Select without ShadowDOM. If you’re using MenuItem without values, everything gets marked and the last item ends up hovered. That’s must be the same behavior as a regular Select without Shadow DOM - if that’s what you were going for.

Sorry my bad, the code was wrong. Updated the code: https://stackblitz.com/edit/lw79g65z?file=src%2Fmain.tsx but it still isn't working. Any idea why? When I open Select and press ArrowDown it doesn't navigate like a Select without Shadow DOM: https://mui.com/material-ui/react-select/#basic-select.

[xBlizZer]

@xBlizZer Thanks for the pull request. But I tried with the PR preview build https://pkg.pr.new/mui/material-ui/@mui/material@918977526ccfd5ea5d4ec6d95e53d30bb1c7f65c but it is not working as expected. See https://stackblitz.com/edit/lw79g65z?file=src%2Fmain.tsx

@ZeeshanTamboli Why isn’t this working as expected? It should behave exactly like a Select without ShadowDOM. If you’re using MenuItem without values, everything gets marked and the last item ends up hovered. That’s must be the same behavior as a regular Select without Shadow DOM - if that’s what you were going for.

Sorry my bad, the code was wrong. Updated the code: https://stackblitz.com/edit/lw79g65z?file=src%2Fmain.tsx but it still isn't working. Any idea why? When I open Select and press ArrowDown it doesn't navigate like a Select without Shadow DOM: https://mui.com/material-ui/react-select/#basic-select.

I understand — I didn’t notice the issue initially because I primarily opened the field using a keyboard. However, I realized that we might need to treat this bug separately. I updated the mui/material version to the latest (without my changes) and removed the ShadowDOM, and I was still able to reproduce the problem. The focus effect on the MenuList item appears briefly and then disappears, which means keyboard navigation is no longer possible afterward.

I tested my change using the container property in MenuProps like this:
<Select MenuProps={{ container: shadowRootElement }}>

With this adjustment, my fix works as expected.

[ZeeshanTamboli]

I understand — I didn’t notice the issue initially because I primarily opened the field using a keyboard. However, I realized that we might need to treat this bug separately. I updated the mui/material version to the latest (without my changes) and removed the ShadowDOM, and I was still able to reproduce the problem. The focus effect on the MenuList item appears briefly and then disappears, which means keyboard navigation is no longer possible afterward.

There's already an issue open on it #34218

I tested my change using the container property in MenuProps like this: <Select MenuProps={{ container: shadowRootElement }}>

With this adjustment, my fix works as expected.

Yes, looks good.

[xBlizZer]

Thanks for adding some tests