[ModalManager] Fix aria-hidden of modal current node

docs/src/pages/demos/cards/ImgMediaCard.js

@@ -14,7 +14,7 @@ const styles = {
     maxWidth: 345,
   },
   media: {
-    // ⚠️ object-fit is not supported by IE11.
+    // ⚠️ object-fit is not supported by IE 11.
     objectFit: 'cover',
   },
 };

docs/src/pages/page-layout-examples/sign-in/SignIn.js

@@ -16,7 +16,7 @@ import withStyles from '@material-ui/core/styles/withStyles';
 const styles = theme => ({
   layout: {
     width: 'auto',
-    display: 'block', // Fix IE11 issue.
+    display: 'block', // Fix IE 11 issue.
     marginLeft: theme.spacing.unit * 3,
     marginRight: theme.spacing.unit * 3,
     [theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: {
@@ -37,7 +37,7 @@ const styles = theme => ({
     backgroundColor: theme.palette.secondary.main,
   },
   form: {
-    width: '100%', // Fix IE11 issue.
+    width: '100%', // Fix IE 11 issue.
     marginTop: theme.spacing.unit,
   },
   submit: {

packages/material-ui/src/Avatar/Avatar.js

@@ -31,7 +31,7 @@ export const styles = theme => ({
     width: '100%',
     height: '100%',
     textAlign: 'center',
-    // Handle non-square image. The property isn't supported by IE11.
+    // Handle non-square image. The property isn't supported by IE 11.
     objectFit: 'cover',
   },
 });

packages/material-ui/src/ClickAwayListener/ClickAwayListener.js

@@ -30,7 +30,7 @@ class ClickAwayListener extends React.Component {
       return;
     }
 
-    // IE11 support, which trigger the handleClickAway even after the unbind
+    // IE 11 support, which trigger the handleClickAway even after the unbind
     if (!this.mounted) {
       return;
     }

packages/material-ui/src/ClickAwayListener/ClickAwayListener.test.js

@@ -155,7 +155,7 @@ describe('<ClickAwayListener />', () => {
     });
   });
 
-  describe('IE11 issue', () => {
+  describe('IE 11 issue', () => {
     it('should not call the hook if the event is triggered after being unmounted', () => {
       const handleClickAway = spy();
       wrapper = mount(

packages/material-ui/src/Dialog/Dialog.js

@@ -30,7 +30,7 @@ export const styles = theme => ({
     flexDirection: 'column',
     margin: 48,
     position: 'relative',
-    overflowY: 'auto', // Fix IE11 issue, to remove at some point.
+    overflowY: 'auto', // Fix IE 11 issue, to remove at some point.
     // We disable the focus ring for mouse, touch and keyboard users.
     outline: 'none',
   },

packages/material-ui/src/FilledInput/FilledInput.js

@@ -37,7 +37,7 @@ export const styles = theme => {
         borderBottom: `2px solid ${theme.palette.primary[light ? 'dark' : 'light']}`,
         left: 0,
         bottom: 0,
-        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+        // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
         content: '""',
         position: 'absolute',
         right: 0,
@@ -59,7 +59,7 @@ export const styles = theme => {
         borderBottom: `1px solid ${bottomLineColor}`,
         left: 0,
         bottom: 0,
-        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+        // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
         content: '"\\00a0"',
         position: 'absolute',
         right: 0,

packages/material-ui/src/IconButton/IconButton.js

@@ -16,7 +16,7 @@ export const styles = theme => ({
     fontSize: theme.typography.pxToRem(24),
     padding: 12,
     borderRadius: '50%',
-    overflow: 'visible', // Explicitly set the default value to solve a bug on IE11.
+    overflow: 'visible', // Explicitly set the default value to solve a bug on IE 11.
     color: theme.palette.action.active,
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shortest,

packages/material-ui/src/Input/Input.js

@@ -31,7 +31,7 @@ export const styles = theme => {
         borderBottom: `2px solid ${theme.palette.primary[light ? 'dark' : 'light']}`,
         left: 0,
         bottom: 0,
-        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+        // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
         content: '""',
         position: 'absolute',
         right: 0,
@@ -53,7 +53,7 @@ export const styles = theme => {
         borderBottom: `1px solid ${bottomLineColor}`,
         left: 0,
         bottom: 0,
-        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+        // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
         content: '"\\00a0"',
         position: 'absolute',
         right: 0,

packages/material-ui/src/InputBase/InputBase.js

@@ -76,7 +76,7 @@ export const styles = theme => {
       display: 'block',
       // Make the flex item shrink with Firefox
       minWidth: 0,
-      width: '100%', // Fix IE11 width issue
+      width: '100%', // Fix IE 11 width issue
       '&::-webkit-input-placeholder': placeholder,
       '&::-moz-placeholder': placeholder, // Firefox 19+
       '&:-ms-input-placeholder': placeholder, // IE 11
@@ -222,7 +222,7 @@ class InputBase extends React.Component {
   }
 
   handleFocus = event => {
-    // Fix a bug with IE11 where the focus/blur events are triggered
+    // Fix a bug with IE 11 where the focus/blur events are triggered
     // while the input is disabled.
     if (
       formControlState({ props: this.props, context: this.context, states: ['disabled'] }).disabled

packages/material-ui/src/InputBase/InputBase.test.js

@@ -84,7 +84,7 @@ describe('<InputBase />', () => {
       assert.strictEqual(handleBlur.callCount, 1);
     });
 
-    // IE11 bug
+    // IE 11 bug
     it('should not respond the focus event when disabled', () => {
       const wrapper = shallow(<InputBase disabled />);
       const instance = wrapper.instance();

packages/material-ui/src/Modal/Modal.js

@@ -64,7 +64,8 @@ class Modal extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (!prevProps.open && this.props.open) {
-      this.checkForFocus();
+      // check for focus
+      this.lastFocus = ownerDocument(this.mountNode).activeElement;
     }
 
     if (prevProps.open && !this.props.open && !getHasTransition(this.props)) {
@@ -100,31 +101,50 @@ class Modal extends React.Component {
     return null;
   }
 
-  handleRendered = () => {
-    this.autoFocus();
+  handleOpen = () => {
+    const doc = ownerDocument(this.mountNode);
+    const container = getContainer(this.props.container, doc.body);
 
-    // Fix a bug on Chrome where the scroll isn't initially 0.
-    this.modalRef.scrollTop = 0;
+    this.props.manager.add(this, container);
+    doc.addEventListener('keydown', this.handleDocumentKeyDown);
+    doc.addEventListener('focus', this.enforceFocus, true);
 
+    if (this.dialogRef) {
+      this.handleOpened();
+    }
+  };
+
+  handleRendered = () => {
     if (this.props.onRendered) {
       this.props.onRendered();
     }
+
+    if (this.props.open) {
+      this.handleOpened();
+    } else {
+      const doc = ownerDocument(this.mountNode);
+      const container = getContainer(this.props.container, doc.body);
+      this.props.manager.add(this, container);
+      this.props.manager.remove(this);
+    }
   };
 
-  handleOpen = () => {
-    const doc = ownerDocument(this.mountNode);
-    const container = getContainer(this.props.container, doc.body);
+  handleOpened = () => {
+    this.autoFocus();
 
-    this.props.manager.add(this, container);
-    doc.addEventListener('keydown', this.handleDocumentKeyDown);
-    doc.addEventListener('focus', this.enforceFocus, true);
+    // Fix a bug on Chrome where the scroll isn't initially 0.
+    this.modalRef.scrollTop = 0;
   };
 
+  handleDisplay = () => {};
+
   handleClose = () => {
     this.props.manager.remove(this);
+
     const doc = ownerDocument(this.mountNode);
     doc.removeEventListener('keydown', this.handleDocumentKeyDown);
     doc.removeEventListener('focus', this.enforceFocus, true);
+
     this.restoreLastFocus();
   };
 
@@ -148,12 +168,8 @@ class Modal extends React.Component {
   };
 
   handleDocumentKeyDown = event => {
-    if (!this.isTopModal() || keycode(event) !== 'esc') {
-      return;
-    }
-
     // Ignore events that have been `event.preventDefault()` marked.
-    if (event.defaultPrevented) {
+    if (keycode(event) !== 'esc' || !this.isTopModal() || event.defaultPrevented) {
       return;
     }
 
@@ -166,32 +182,28 @@ class Modal extends React.Component {
     }
   };
 
-  checkForFocus = () => {
-    this.lastFocus = ownerDocument(this.mountNode).activeElement;
-  };
-
   enforceFocus = () => {
-    if (this.props.disableEnforceFocus || !this.mounted || !this.isTopModal()) {
+    // The Modal might not already be mounted.
+    if (!this.isTopModal() || this.props.disableEnforceFocus || !this.mounted || !this.dialogRef) {
       return;
     }
 
     const currentActiveElement = ownerDocument(this.mountNode).activeElement;
 
-    if (this.dialogRef && !this.dialogRef.contains(currentActiveElement)) {
+    if (!this.dialogRef.contains(currentActiveElement)) {
       this.dialogRef.focus();
     }
   };
 
   autoFocus() {
-    if (this.props.disableAutoFocus) {
+    // We might render an empty child.
+    if (this.props.disableAutoFocus || !this.dialogRef) {
       return;
     }
 
     const currentActiveElement = ownerDocument(this.mountNode).activeElement;
 
-    if (this.dialogRef && !this.dialogRef.contains(currentActiveElement)) {
-      this.lastFocus = currentActiveElement;
-
+    if (!this.dialogRef.contains(currentActiveElement)) {
       if (!this.dialogRef.hasAttribute('tabIndex')) {
         warning(
           false,
@@ -204,25 +216,24 @@ class Modal extends React.Component {
         this.dialogRef.setAttribute('tabIndex', -1);
       }
 
+      this.lastFocus = currentActiveElement;
       this.dialogRef.focus();
     }
   }
 
   restoreLastFocus() {
-    if (this.props.disableRestoreFocus) {
+    if (this.props.disableRestoreFocus || !this.lastFocus) {
       return;
     }
 
-    if (this.lastFocus) {
-      // Not all elements in IE11 have a focus method.
-      // Because IE11 market share is low, we accept the restore focus being broken
-      // and we silent the issue.
-      if (this.lastFocus.focus) {
-        this.lastFocus.focus();
-      }
-
-      this.lastFocus = null;
+    // Not all elements in IE 11 have a focus method.
+    // Because IE 11 market share is low, we accept the restore focus being broken
+    // and we silent the issue.
+    if (this.lastFocus.focus) {
+      this.lastFocus.focus();
     }
+
+    this.lastFocus = null;
   }
 
   isTopModal() {
@@ -255,12 +266,13 @@ class Modal extends React.Component {
     } = this.props;
     const { exited } = this.state;
     const hasTransition = getHasTransition(this.props);
-    const childProps = {};
 
     if (!keepMounted && !open && (!hasTransition || exited)) {
       return null;
     }
 
+    const childProps = {};
+
     // It's a Transition like component
     if (hasTransition) {
       childProps.onExited = createChainedFunction(this.handleExited, children.props.onExited);
@@ -414,6 +426,7 @@ Modal.propTypes = {
 };
 
 Modal.defaultProps = {
+  BackdropComponent: Backdrop,
   disableAutoFocus: false,
   disableBackdropClick: false,
   disableEnforceFocus: false,
@@ -424,7 +437,6 @@ Modal.defaultProps = {
   keepMounted: false,
   // Modals don't open on the server so this won't conflict with concurrent requests.
   manager: new ModalManager(),
-  BackdropComponent: Backdrop,
 };
 
 export default withStyles(styles, { flip: false, name: 'MuiModal' })(Modal);

packages/material-ui/src/Modal/Modal.test.js

@@ -274,7 +274,9 @@ describe('<Modal />', () => {
       topModalStub.returns(false);
       wrapper.setProps({ manager: { isTopModal: topModalStub } });
 
-      instance.handleDocumentKeyDown(undefined);
+      instance.handleDocumentKeyDown({
+        keyCode: keycode('esc'),
+      });
       assert.strictEqual(topModalStub.callCount, 1);
       assert.strictEqual(onEscapeKeyDownSpy.callCount, 0);
       assert.strictEqual(onCloseSpy.callCount, 0);
@@ -286,7 +288,7 @@ describe('<Modal />', () => {
       event = { keyCode: keycode('j') }; // Not 'esc'
 
       instance.handleDocumentKeyDown(event);
-      assert.strictEqual(topModalStub.callCount, 1);
+      assert.strictEqual(topModalStub.callCount, 0);
       assert.strictEqual(onEscapeKeyDownSpy.callCount, 0);
       assert.strictEqual(onCloseSpy.callCount, 0);
     });
@@ -348,6 +350,16 @@ describe('<Modal />', () => {
       );
       assert.strictEqual(wrapper.contains(children), false);
     });
+
+    it('should mount', () => {
+      mount(
+        <Modal keepMounted open={false}>
+          <div />
+        </Modal>,
+      );
+      const modalNode = document.querySelector('[data-mui-test="Modal"]');
+      assert.strictEqual(modalNode.getAttribute('aria-hidden'), 'true');
+    });
   });
 
   describe('prop: onExited', () => {