[Popper] Fix to defer setting of exited state to Transition component

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

@@ -66,23 +66,6 @@ class Popper extends React.Component {
     this.handleClose();
   }
 
-  static getDerivedStateFromProps(nextProps) {
-    if (nextProps.open) {
-      return {
-        exited: false,
-      };
-    }
-
-    if (!nextProps.transition) {
-      // Otherwise let handleExited take care of marking exited.
-      return {
-        exited: true,
-      };
-    }
-
-    return null;
-  }
-
   handleOpen = () => {
     const { anchorEl, modifiers, open, placement, popperOptions = {}, disablePortal } = this.props;
     const popperNode = this.tooltipRef.current;
@@ -126,6 +109,10 @@ class Popper extends React.Component {
     }
   };
 
+  handleEnter = () => {
+    this.setState({ exited: false });
+  };
+
   handleExited = () => {
     this.setState({ exited: true });
     this.handleClose();
@@ -173,6 +160,7 @@ class Popper extends React.Component {
     if (transition) {
       childProps.TransitionProps = {
         in: open,
+        onEnter: this.handleEnter,
         onExited: this.handleExited,
       };
     }

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

@@ -6,13 +6,16 @@ import { createShallow, createMount, describeConformance } from '@material-ui/co
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import Grow from '../Grow';
 import Popper from './Popper';
+import { Transition } from 'react-transition-group';
 
 describe('<Popper />', () => {
   let shallow;
   let mount;
+  const defaultChildrenId = '__Popper_test_js__children__id__';
+  const defaultChildrenSelector = `#${defaultChildrenId}`;
   const defaultProps = {
     anchorEl: () => window.document.createElement('div'),
-    children: <span>Hello World</span>,
+    children: <span id={defaultChildrenId}>Hello World</span>,
     open: true,
   };
 
@@ -97,13 +100,13 @@ describe('<Popper />', () => {
   describe('mount', () => {
     it('should mount without any issue', () => {
       const wrapper = mount(<Popper {...defaultProps} open={false} />);
-      assert.strictEqual(wrapper.find('span').length, 0);
+      assert.isFalse(wrapper.exists(defaultChildrenSelector));
       wrapper.setProps({ open: true });
       wrapper.update();
-      assert.strictEqual(wrapper.find('span').length, 1);
-      assert.strictEqual(wrapper.find('span').text(), 'Hello World');
+      assert.isTrue(wrapper.exists(defaultChildrenSelector));
+      assert.strictEqual(wrapper.find(defaultChildrenSelector).text(), 'Hello World');
       wrapper.setProps({ open: false });
-      assert.strictEqual(wrapper.find('span').length, 0);
+      assert.isFalse(wrapper.exists(defaultChildrenSelector));
     });
 
     it('should position the popper when opening', () => {
@@ -127,16 +130,12 @@ describe('<Popper />', () => {
     it('should work', () => {
       const wrapper = mount(
         <Popper {...defaultProps} open transition>
-          {({ TransitionProps }) => (
-            <Grow {...TransitionProps}>
-              <span>Hello World</span>
-            </Grow>
-          )}
+          {({ TransitionProps }) => <Grow {...TransitionProps}>{defaultProps.children}</Grow>}
         </Popper>,
       );
       const instance = wrapper.find('Popper').instance();
-      assert.strictEqual(wrapper.find('span').length, 1);
-      assert.strictEqual(wrapper.find('span').text(), 'Hello World');
+      assert.isTrue(wrapper.exists(defaultChildrenSelector));
+      assert.strictEqual(wrapper.find(defaultChildrenSelector).text(), 'Hello World');
       assert.strictEqual(instance.popper !== null, true);
       wrapper.setProps({ anchorEl: null, open: false });
       wrapper
@@ -151,16 +150,10 @@ describe('<Popper />', () => {
     it('should update the exited state', () => {
       const wrapper = mount(
         <Popper {...defaultProps} open transition>
-          {({ TransitionProps }) => (
-            <Grow {...TransitionProps}>
-              <span>Hello World</span>
-            </Grow>
-          )}
+          {({ TransitionProps }) => <Grow {...TransitionProps}>{defaultProps.children}</Grow>}
         </Popper>,
       );
-      wrapper.setProps({
-        open: false,
-      });
+      wrapper.setProps({ open: false });
       wrapper
         .find(Grow)
         .props()
@@ -169,6 +162,48 @@ describe('<Popper />', () => {
     });
   });
 
+  describe('prop: keepMounted', () => {
+    it('should keep the children in the DOM', () => {
+      const wrapper = mount(<Popper {...defaultProps} open={false} keepMounted />);
+      assert.isTrue(wrapper.exists(defaultChildrenSelector));
+    });
+
+    /* Test case for https://github.com/mui-org/material-ui/issues/15180 */
+    it('should remove from DOM when closed whilst transition has entering status', () => {
+      const onEntering = spy();
+      const onEntered = spy();
+      const wrapper = mount(
+        <Popper {...defaultProps} open={false} keepMounted={false} transition>
+          {({ TransitionProps }) => (
+            <Transition
+              {...TransitionProps}
+              appear
+              exit={false} // Disable exit animation, so it immediately unmounts on close
+              timeout={500}
+              onEntering={onEntering}
+              onEntered={onEntered}
+            >
+              {defaultProps.children}
+            </Transition>
+          )}
+        </Popper>,
+      );
+      assert.isFalse(wrapper.exists(defaultChildrenSelector));
+      assert.strictEqual(onEntering.callCount, 0);
+
+      wrapper.setProps({ open: true });
+      wrapper.update();
+      assert.isTrue(wrapper.exists(defaultChildrenSelector));
+      assert.strictEqual(onEntering.callCount, 1);
+      assert.strictEqual(onEntered.callCount, 0);
+
+      wrapper.setProps({ open: false });
+      wrapper.update();
+      assert.isFalse(wrapper.exists(defaultChildrenSelector));
+      assert.strictEqual(onEntered.callCount, 0); // Ensuring component was never "entered"
+    });
+  });
+
   describe('warnings', () => {
     beforeEach(() => {
       consoleErrorMock.spy();