[ModalManager] Lock body scroll when container is inside shadow DOM (#…

…33168)
mui · Jun 22, 2022 · 6b9970e · 6b9970e
1 parent 6e25fc5
commit 6b9970e
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 8 deletions.
diff --git a/packages/mui-base/src/ModalUnstyled/ModalManager.test.js b/packages/mui-base/src/ModalUnstyled/ModalManager.test.js
@@ -167,6 +167,39 @@ describe('ModalManager', () => {
       expect(fixedNode.style.paddingRight).to.equal('');
     });
 
+    describe('shadow dom', () => {
+      let shadowContainer;
+      let container2;
+
+      beforeEach(() => {
+        shadowContainer = document.createElement('div');
+        const shadowRoot = shadowContainer.attachShadow({ mode: 'open' });
+        container2 = document.createElement('div');
+        shadowRoot.appendChild(container2);
+      });
+
+      afterEach(() => {
+        document.body.removeChild(shadowContainer);
+      });
+
+      it('should scroll body when parent is shadow root', () => {
+        const modal = {};
+
+        container2.style.overflow = 'scroll';
+
+        document.body.appendChild(shadowContainer);
+        modalManager.add(modal, container2);
+        modalManager.mount(modal, {});
+
+        expect(container2.style.overflow).to.equal('scroll');
+        expect(document.body.style.overflow).to.equal('hidden');
+        modalManager.remove(modal);
+
+        expect(container2.style.overflow).to.equal('scroll');
+        expect(document.body.style.overflow).to.equal('');
+      });
+    });
+
     describe('restore styles', () => {
       let container2;
 

diff --git a/packages/mui-base/src/ModalUnstyled/ModalManager.ts b/packages/mui-base/src/ModalUnstyled/ModalManager.ts
@@ -122,14 +122,21 @@ function handleContainer(containerInfo: Container, props: ManagedModalProps) {
       });
     }
 
-    // Improve Gatsby support
-    // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
-    const parent = container.parentElement;
-    const containerWindow = ownerWindow(container);
-    const scrollContainer =
-      parent?.nodeName === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll'
-        ? parent
-        : container;
+    let scrollContainer: HTMLElement;
+
+    if (container.parentNode instanceof DocumentFragment) {
+      scrollContainer = ownerDocument(container).body;
+    } else {
+      // Improve Gatsby support
+      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+      const parent = container.parentElement;
+      const containerWindow = ownerWindow(container);
+      scrollContainer =
+        parent?.nodeName === 'HTML' &&
+        containerWindow.getComputedStyle(parent).overflowY === 'scroll'
+          ? parent
+          : container;
+    }
 
     // Block the scroll even if no scrollbar is visible to account for mobile keyboard
     // screensize shrink.

diff --git a/test/utils/createDOM.js b/test/utils/createDOM.js
@@ -16,6 +16,7 @@ const whitelist = [
   'Node',
   'Performance',
   'document',
+  'DocumentFragment',
 ];
 const blacklist = ['sessionStorage', 'localStorage'];