[Modal] Remove scroll even if no overflow to account for mobile keyboard

mui · Oct 21, 2019 · d27ff2c · d27ff2c
1 parent 580cbf9
commit d27ff2c
Show file tree

Hide file tree

Showing 15 changed files with 99 additions and 82 deletions.
diff --git a/docs/src/pages/components/modal/ServerModal.js b/docs/src/pages/components/modal/ServerModal.js
@@ -4,9 +4,14 @@ import Modal from '@material-ui/core/Modal';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    transform: 'translateZ(0)',
     height: 300,
     flexGrow: 1,
+    transform: 'translateZ(0)',
+    // The position fixed scoping doesn't work in IE 11.
+    // Disable this demo to preserve the others.
+    '@media all and (-ms-high-contrast: none)': {
+      display: 'none',
+    },
   },
   modal: {
     display: 'flex',

diff --git a/docs/src/pages/components/modal/ServerModal.tsx b/docs/src/pages/components/modal/ServerModal.tsx
@@ -5,9 +5,14 @@ import Modal from '@material-ui/core/Modal';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      transform: 'translateZ(0)',
       height: 300,
       flexGrow: 1,
+      transform: 'translateZ(0)',
+      // The position fixed scoping doesn't work in IE 11.
+      // Disable this demo to preserve the others.
+      '@media all and (-ms-high-contrast: none)': {
+        display: 'none',
+      },
     },
     modal: {
       display: 'flex',

diff --git a/docs/src/pages/components/modal/SpringModal.js b/docs/src/pages/components/modal/SpringModal.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Modal from '@material-ui/core/Modal';
 import Backdrop from '@material-ui/core/Backdrop';
-import { useSpring, animated } from 'react-spring';
+import { useSpring, animated } from 'react-spring/web.cjs';
 
 const useStyles = makeStyles(theme => ({
   modal: {

diff --git a/docs/src/pages/components/modal/SpringModal.tsx b/docs/src/pages/components/modal/SpringModal.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Modal from '@material-ui/core/Modal';
 import Backdrop from '@material-ui/core/Backdrop';
-import { useSpring, animated } from 'react-spring';
+import { useSpring, animated } from 'react-spring/web.cjs' // web.cjs is required for IE 11 support
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

diff --git a/docs/src/pages/components/popper/SpringPopper.js b/docs/src/pages/components/popper/SpringPopper.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
-import { useSpring, animated } from 'react-spring';
+import { useSpring, animated } from 'react-spring/web.cjs'; // web.cjs is required for IE 11 support
 
 const useStyles = makeStyles(theme => ({
   paper: {

diff --git a/docs/src/pages/components/popper/SpringPopper.tsx b/docs/src/pages/components/popper/SpringPopper.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
-import { useSpring, animated } from 'react-spring';
+import { useSpring, animated } from 'react-spring/web.cjs' // web.cjs is required for IE 11 support
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

diff --git a/docs/src/pages/components/tree-view/CustomizedTreeView.js b/docs/src/pages/components/tree-view/CustomizedTreeView.js
@@ -5,7 +5,7 @@ import { fade, makeStyles, withStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import TreeItem from '@material-ui/lab/TreeItem';
 import Collapse from '@material-ui/core/Collapse';
-import { useSpring, animated } from 'react-spring';
+import { useSpring, animated } from 'react-spring/web.cjs'; // web.cjs is required for IE 11 support
 
 function MinusSquare(props) {
   return (

diff --git a/docs/src/pages/components/tree-view/CustomizedTreeView.tsx b/docs/src/pages/components/tree-view/CustomizedTreeView.tsx
@@ -4,7 +4,7 @@ import { fade, makeStyles, withStyles, Theme, createStyles } from '@material-ui/
 import TreeView from '@material-ui/lab/TreeView';
 import TreeItem, { TreeItemProps } from '@material-ui/lab/TreeItem';
 import Collapse from '@material-ui/core/Collapse';
-import { useSpring, animated } from 'react-spring';
+import { useSpring, animated } from 'react-spring/web.cjs' // web.cjs is required for IE 11 support
 import { TransitionProps } from '@material-ui/core/transitions';
 
 function MinusSquare(props: SvgIconProps) {

diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.test.js b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.test.js
@@ -77,13 +77,13 @@ describe('<ClickAwayListener />', () => {
         </ClickAwayListener>,
       );
       const preventDefault = event => event.preventDefault();
-      window.document.body.addEventListener('click', preventDefault);
+      document.body.addEventListener('click', preventDefault);
 
       const event = new window.Event('click', { view: window, bubbles: true, cancelable: true });
-      window.document.body.dispatchEvent(event);
+      document.body.dispatchEvent(event);
       assert.strictEqual(handleClickAway.callCount, 0);
 
-      window.document.body.removeEventListener('click', preventDefault);
+      document.body.removeEventListener('click', preventDefault);
     });
   });
 

diff --git a/packages/material-ui/src/Modal/Modal.test.js b/packages/material-ui/src/Modal/Modal.test.js
@@ -49,8 +49,18 @@ describe('<Modal />', () => {
   );
 
   describe('props', () => {
+    let container;
+
+    before(() => {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    });
+
+    after(() => {
+      document.body.removeChild(container);
+    });
+
     it('should consume theme default props', () => {
-      const container = document.createElement('div');
       const theme = createMuiTheme({ props: { MuiModal: { container } } });
       mount(
         <ThemeProvider theme={theme}>
@@ -620,11 +630,11 @@ describe('<Modal />', () => {
       };
 
       const wrapper = mount(<TestCase open={false} />);
-      assert.strictEqual(document.body.style.overflow, '');
+      assert.strictEqual(document.body.parentNode.style.overflow, '');
       wrapper.setProps({ open: true });
-      assert.strictEqual(document.body.style.overflow, 'hidden');
+      assert.strictEqual(document.body.parentNode.style.overflow, 'hidden');
       wrapper.setProps({ open: false });
-      assert.strictEqual(document.body.style.overflow, '');
+      assert.strictEqual(document.body.parentNode.style.overflow, '');
     });
 
     it('should open and close with Transitions', done => {
@@ -649,17 +659,17 @@ describe('<Modal />', () => {
 
       let wrapper;
       const onEntered = () => {
-        assert.strictEqual(document.body.style.overflow, 'hidden');
+        assert.strictEqual(document.body.parentNode.style.overflow, 'hidden');
         wrapper.setProps({ open: false });
       };
 
       const onExited = () => {
-        assert.strictEqual(document.body.style.overflow, '');
+        assert.strictEqual(document.body.parentNode.style.overflow, '');
         done();
       };
 
       wrapper = mount(<TestCase onEntered={onEntered} onExited={onExited} open={false} />);
-      assert.strictEqual(document.body.style.overflow, '');
+      assert.strictEqual(document.body.parentNode.style.overflow, '');
       wrapper.setProps({ open: true });
     });
   });
@@ -711,23 +721,23 @@ describe('<Modal />', () => {
 
       let wrapper;
       const onEntered = () => {
-        assert.strictEqual(document.body.style.overflow, 'hidden');
+        assert.strictEqual(document.body.parentNode.style.overflow, 'hidden');
         wrapper.setProps({ open: false });
       };
 
       const onExited = () => {
-        assert.strictEqual(document.body.style.overflow, '');
+        assert.strictEqual(document.body.parentNode.style.overflow, '');
         done();
       };
 
       const onExiting = () => {
-        assert.strictEqual(document.body.style.overflow, 'hidden');
+        assert.strictEqual(document.body.parentNode.style.overflow, 'hidden');
       };
 
       wrapper = mount(
         <TestCase onEntered={onEntered} onExiting={onExiting} onExited={onExited} open={false} />,
       );
-      assert.strictEqual(document.body.style.overflow, '');
+      assert.strictEqual(document.body.parentNode.style.overflow, '');
       wrapper.setProps({ open: true });
     });
 
@@ -754,23 +764,23 @@ describe('<Modal />', () => {
 
       let wrapper;
       const onEntered = () => {
-        assert.strictEqual(document.body.style.overflow, 'hidden');
+        assert.strictEqual(document.body.parentNode.style.overflow, 'hidden');
         wrapper.setProps({ open: false });
       };
 
       const onExited = () => {
-        assert.strictEqual(document.body.style.overflow, '');
+        assert.strictEqual(document.body.parentNode.style.overflow, '');
         done();
       };
 
       const onExiting = () => {
-        assert.strictEqual(document.body.style.overflow, '');
+        assert.strictEqual(document.body.parentNode.style.overflow, '');
       };
 
       wrapper = mount(
         <TestCase onEntered={onEntered} onExiting={onExiting} onExited={onExited} open={false} />,
       );
-      assert.strictEqual(document.body.style.overflow, '');
+      assert.strictEqual(document.body.parentNode.style.overflow, '');
       wrapper.setProps({ open: true });
     });
   });

diff --git a/packages/material-ui/src/Modal/ModalManager.js b/packages/material-ui/src/Modal/ModalManager.js
@@ -2,13 +2,12 @@ import getScrollbarSize from '../utils/getScrollbarSize';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 
-// Do we have a vertical scrollbar?
+// Is a vertical scrollbar displayed?
 function isOverflowing(container) {
   const doc = ownerDocument(container);
 
   if (doc.body === container) {
-    const win = ownerWindow(doc);
-    return win.innerWidth > doc.documentElement.clientWidth;
+    return ownerWindow(doc).innerWidth > doc.documentElement.clientWidth;
   }
 
   return container.scrollHeight > container.clientHeight;
@@ -26,26 +25,21 @@ function getPaddingRight(node) {
   return parseInt(window.getComputedStyle(node)['padding-right'], 10) || 0;
 }
 
-const BLACKLIST = ['template', 'script', 'style'];
-
-function isHideable(node) {
-  return node.nodeType === 1 && BLACKLIST.indexOf(node.tagName.toLowerCase()) === -1;
-}
-
-function siblings(container, mount, currentNode, nodesToExclude, callback) {
-  const blacklist = [mount, currentNode, ...nodesToExclude];
+function ariaHiddenSiblings(container, mountNode, currentNode, nodesToExclude = [], show) {
+  const blacklist = [mountNode, currentNode, ...nodesToExclude];
+  const blacklistTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE'];
 
   [].forEach.call(container.children, node => {
-    if (blacklist.indexOf(node) === -1 && isHideable(node)) {
-      callback(node);
+    if (
+      node.nodeType === 1 &&
+      blacklist.indexOf(node) === -1 &&
+      blacklistTagNames.indexOf(node.tagName) === -1
+    ) {
+      ariaHidden(node, show);
     }
   });
 }
 
-function ariaHiddenSiblings(container, mountNode, currentNode, nodesToExclude = [], show) {
-  siblings(container, mountNode, currentNode, nodesToExclude, node => ariaHidden(node, show));
-}
-
 function findIndexOf(containerInfo, callback) {
   let idx = -1;
   containerInfo.some((item, index) => {
@@ -64,39 +58,42 @@ function handleContainer(containerInfo, props) {
   const container = containerInfo.container;
   let fixedNodes;
 
-  if (!props.disableScrollLock && isOverflowing(container)) {
+  if (!props.disableScrollLock) {
+    const overflowing = isOverflowing(container);
+
+    // Improve Gatsby support
+    // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
     const parent = container.parentElement;
-    if (parent.nodeName === 'HTML') {
-      restoreStyle.push({
-        value: parent.style.overflow,
-        key: 'overflow',
-        el: parent,
-      });
-      parent.style.overflow = 'hidden';
-    }
+    const scrollContainer = parent.nodeName === 'HTML' ? parent : container;
+
     restoreStyle.push({
-      value: container.style.overflow,
+      value: scrollContainer.style.overflow,
       key: 'overflow',
-      el: container,
+      el: scrollContainer,
     });
-    restoreStyle.push({
-      value: container.style.paddingRight,
-      key: 'padding-right',
-      el: container,
-    });
-    container.style.overflow = 'hidden';
 
-    const scrollbarSize = getScrollbarSize();
+    // Block the scroll even if no scrollbar is visible to account for mobile keyboard
+    // screensize shrink.
+    scrollContainer.style.overflow = 'hidden';
 
-    // Use computed style, here to get the real padding to add our scrollbar width.
-    container.style['padding-right'] = `${getPaddingRight(container) + scrollbarSize}px`;
+    if (overflowing) {
+      const scrollbarSize = getScrollbarSize();
 
-    // .mui-fixed is a global helper.
-    fixedNodes = ownerDocument(container).querySelectorAll('.mui-fixed');
-    [].forEach.call(fixedNodes, node => {
-      restorePaddings.push(node.style.paddingRight);
-      node.style.paddingRight = `${getPaddingRight(node) + scrollbarSize}px`;
-    });
+      restoreStyle.push({
+        value: container.style.paddingRight,
+        key: 'padding-right',
+        el: container,
+      });
+      // Use computed style, here to get the real padding to add our scrollbar width.
+      container.style['padding-right'] = `${getPaddingRight(container) + scrollbarSize}px`;
+
+      // .mui-fixed is a global helper.
+      fixedNodes = ownerDocument(container).querySelectorAll('.mui-fixed');
+      [].forEach.call(fixedNodes, node => {
+        restorePaddings.push(node.style.paddingRight);
+        node.style.paddingRight = `${getPaddingRight(node) + scrollbarSize}px`;
+      });
+    }
   }
 
   const restore = () => {
@@ -241,6 +238,6 @@ export default class ModalManager {
   }
 
   isTopModal(modal) {
-    return !!this.modals.length && this.modals[this.modals.length - 1] === modal;
+    return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
   }
 }