Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Modal] Not friendly with ShadowRoot

See original GitHub issue

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When providing a ShadowRoot as container, mui throws.

Uncaught TypeError: Cannot read property 'nodeName' of null
    at handleContainer
    at ModalManager.mount
    at handleMounted

    var parent = container.parentElement;
    var scrollContainer = parent.nodeName === 'HTML' && window.getComputedStyle(parent)['overflow-y'] === 'scroll' ? parent : container; // Block the scroll even if no scrollbar is visible to account for mobile keyboard

The code is assuming the element have parentElement which is null when the element is the top element of the ShadowRoot or the ShadowRoot itself. Then when it try to access parent.nodeName, it throws.

Expected Behavior 🤔

Can use with ShadowRoot

Steps to Reproduce 🕹

https://codesandbox.io/s/cool-dubinsky-m8gwu?file=/src/Demo.js

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v5.0.0-alpha.8
React
Browser
TypeScript
etc.

Issue Analytics

State:
Created 3 years ago
Comments:12 (12 by maintainers)

Top GitHub Comments

2reactions

oliviertassinaricommented, Sep 4, 2020

@Jack-Works If I understand you correct, container.parentElement is not an issue after all because Material-UI forces you (for the styles) to have a nested shadow-root > div > div structure.

0reactions

Jack-Workscommented, Sep 4, 2020

Hmm I need to mention another case:

In latest react experimental version, reacts will clean the container before rendering things in it. Since JSS it’s not supporting constructable stylesheets (which can inject styles without a HTML tag), it says no longer possible to directly render things in the shadow roots having styles.

Our new way is doing the following things: There are two tags in the shadow roots: <head> and <div>, head tag as used to storing styles and the div tag is used to rendering elements.

So not only it should rendering shadow root, it’s also be able to render in the shadow roots (which doesn’t have a “parentElememt”) and events doesn’t pop up to the top level(document) with the correct composePath (new react event system mount events mounts the events handlers on the container instead of the documents, please make sure MUI also not relaying on this kind of behaviors).