[Modal] Breaking when modal container is shadowRoot and enable scroll lock

[VietNguyenQuoc]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-material-ui-typescript-6cbzhm4c?file=components%2FApp.tsx
2. Check the console log

Current behavior

When trying to render the Modal as the direct child of a shadow root, it throws errors and breaks the app.

Uncaught TypeError: Cannot read properties of undefined (reading 'overflow')
    at handleContainer (chunk-MK5B7Z6K.js?v=6de58725:5405:36)
    at ModalManager.mount (chunk-MK5B7Z6K.js?v=6de58725:5479:31)
    at handleMounted (chunk-MK5B7Z6K.js?v=6de58725:5828:13)
    at chunk-MK5B7Z6K.js?v=6de58725:5847:7
    at chunk-MK5B7Z6K.js?v=6de58725:1761:58
    at setRef (chunk-MK5B7Z6K.js?v=6de58725:1672:5)
    at chunk-MK5B7Z6K.js?v=6de58725:5302:7
    at commitHookEffectListMount (chunk-YLBYPMLO.js?v=6de58725:16214:34)
    at commitLayoutEffectOnFiber (chunk-YLBYPMLO.js?v=6de58725:16302:23)
    at commitLayoutMountEffects_complete (chunk-YLBYPMLO.js?v=6de58725:17275:17)

Disable the scroll lock will get away with that but I don't think it's the proper way to resolve this issue.

<Modal disableScrollLock ... />

Expected behavior

Should be able to render the Modal as the direct child of shadow root.

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: Modal,ShadowRoot

[mj12albert]

@VietNguyenQuoc Could you provide a repro in CodeSandbox/Stackblitz?

[VietNguyenQuoc]

Hi @mj12albert, I updated the description, please help to check. Thanks.

[mj12albert]

@VietNguyenQuoc See this doc on setting up Material UI for shadow DOM: https://mui.com/material-ui/customization/shadow-dom/#how-to-use-the-shadow-dom-with-material-ui

Step 2 in particular is about the Modal container which needs to be set up like this:

const theme = createTheme({
  components: {
    MuiModal: {
      defaultProps: {
        container: shadowRootElement,
      },
    },
  },
});

Here's a working sandbox: https://codesandbox.io/p/sandbox/cool-allen-h8j7pm?file=%2Findex.tsx%3A1%2C1

[VietNguyenQuoc]

Yes I know it's working if we attach the modal to an HTML element. But should it be also working when attach to a shadow root ? @mj12albert

[mj12albert]

Looking at the code, it seems container must be an HTML element: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Modal/ModalManager.ts#L193

Does it affect your use-case by appending an element into the shadow root first?