Arrow key navigation failing when component is rendered in closed shadow DOM

[gitterhu123]

Steps to reproduce

Steps:

1. Open this link to live example: (required)

Current behavior

https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/getActiveElement/getActiveElement.ts
https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx

getActiveElements tries to resolve the active Element:

element.shadowRoot.activeElement

This only works if shadowRoot is open. If shadowRoot is closed, element.shadowRoot is always null

There was already an issue ( #34061 ) which resolved it for the open shadowRoot

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: shadow dom keyboard select

[mj12albert]

@gitterhu123 Not sure if it matters, but is this with v7.x or v9?

[gitterhu123]

I have tested it with 7.3.10