[Portal] Prepare deprecation of onRendered

mui · Jul 14, 2019 · 5c072f1 · 5c072f1
1 parent 783b693
commit 5c072f1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
@@ -112,7 +112,9 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     }
   });
 
-  const handleRendered = useEventCallback(() => {
+  const handlePortalRef = useEventCallback(node => {
+    mountNodeRef.current = node;
+
     if (onRendered) {
       onRendered();
     }
@@ -216,12 +218,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
   }
 
   return (
-    <Portal
-      ref={mountNodeRef}
-      container={container}
-      disablePortal={disablePortal}
-      onRendered={handleRendered}
-    >
+    <Portal ref={handlePortalRef} container={container} disablePortal={disablePortal}>
       {/*
           Marking an element with the role presentation indicates to assistive technology
           that this element should be ignored; it exists to support the web application and

diff --git a/packages/material-ui/src/Portal/Portal.js b/packages/material-ui/src/Portal/Portal.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { exactProp } from '@material-ui/utils';
-import { useForkRef } from '../utils/reactHelpers';
+import { setRef, useForkRef } from '../utils/reactHelpers';
 
 function getContainer(container) {
   container = typeof container === 'function' ? container() : container;
@@ -28,13 +28,21 @@ const Portal = React.forwardRef(function Portal(props, ref) {
     }
   }, [container, disablePortal]);
 
-  React.useImperativeHandle(ref, () => mountNode || childRef.current, [mountNode]);
+  useEnhancedEffect(() => {
+    if (mountNode || disablePortal) {
+      setRef(ref, mountNode || childRef.current);
+    }
+
+    return () => {
+      setRef(null);
+    };
+  }, [ref, mountNode]);
 
   useEnhancedEffect(() => {
-    if (onRendered && mountNode) {
+    if (onRendered && (mountNode || disablePortal)) {
       onRendered();
     }
-  }, [mountNode, onRendered]);
+  }, [mountNode, onRendered, disablePortal]);
 
   if (disablePortal) {
     React.Children.only(children);
@@ -66,7 +74,7 @@ Portal.propTypes = {
   /**
    * Callback fired once the children has been mounted into the `container`.
    */
-  onRendered: PropTypes.func,
+  onRendered: PropTypes.func, // TODO v5: to remove
 };
 
 if (process.env.NODE_ENV !== 'production') {

diff --git a/packages/material-ui/src/Portal/Portal.test.js b/packages/material-ui/src/Portal/Portal.test.js
@@ -54,7 +54,7 @@ describe('<Portal />', () => {
         <h1>Foo</h1>
       </Portal>,
     );
-    assert.deepEqual(refSpy1.args, [[null], [null], [document.body]]);
+    assert.deepEqual(refSpy1.args, [[document.body]]);
     const refSpy2 = spy();
     mount(
       <Portal disablePortal ref={refSpy2}>