fix(Dialog): rollback body style while unmount fix alibaba-fusion#3725

Author: bindoon

src/dialog/dialog-v2.jsx

@@ -66,7 +66,6 @@ const Dialog = props => {
 
     const [firstVisible, setFirst] = useState(pvisible || false);
     const [visible, setVisible] = useState(pvisible);
-    const [isAnimationEnd, markAnimationEnd] = useState(false);
     const getContainer =
         typeof popupContainer === 'string'
             ? () => document.getElementById(popupContainer)
@@ -81,6 +80,13 @@ const Dialog = props => {
     const [uuid] = useState(guid());
     const { setVisibleOverlayToParent, ...otherContext } = useContext(OverlayContext);
     const childIDMap = useRef(new Map());
+    const isAnimationEnd = useRef(false);
+    const [, forceUpdate] = useState();
+
+    const markAnimationEnd = state => {
+        isAnimationEnd.current = state;
+        forceUpdate({});
+    };
 
     let canCloseByEsc = false;
     let canCloseByMask = false;
@@ -160,11 +166,35 @@ const Dialog = props => {
         }
     }, [container]);
 
+    const handleExited = () => {
+        if (!isAnimationEnd.current) {
+            markAnimationEnd(true);
+            dom.setStyle(wrapperRef.current, 'display', 'none');
+            scrollLocker.unlock(document.body, locker.current);
+
+            if (autoFocus && lastFocus.current) {
+                try {
+                    lastFocus.current.focus();
+                } finally {
+                    // ignore ...
+                }
+                lastFocus.current = null;
+            }
+            afterClose();
+        }
+    };
+
+    useEffect(() => {
+        return () => {
+            handleExited();
+        };
+    }, []);
+
     if (firstVisible === false || !container) {
         return null;
     }
 
-    if (!visible && !cache && isAnimationEnd) {
+    if (!visible && !cache && isAnimationEnd.current) {
         return null;
     }
 
@@ -206,22 +236,6 @@ const Dialog = props => {
         setVisibleOverlayToParent(uuid, wrapperRef.current);
     };
 
-    const handleExited = () => {
-        markAnimationEnd(true);
-        dom.setStyle(wrapperRef.current, 'display', 'none');
-        scrollLocker.unlock(document.body, locker.current);
-
-        if (autoFocus && lastFocus.current) {
-            try {
-                lastFocus.current.focus();
-            } finally {
-                // ignore ...
-            }
-            lastFocus.current = null;
-        }
-        afterClose();
-    };
-
     const wrapperCls = classNames({
         [`${prefix}overlay-wrapper`]: true,
         opened: visible,

test/dialog/index-v2-spec.js

@@ -109,7 +109,7 @@ describe('v2', () => {
         document.body.style='';
     });
 
-    it('should show and hide', async () => {
+    it('should show and hide with no cache', async () => {
         wrapper = render(<Demo2 animation={false} />);
         const btn = document.querySelector('button');
         ReactTestUtils.Simulate.click(btn);
@@ -119,6 +119,7 @@ describe('v2', () => {
         const okBtn = document.querySelector('.next-btn-primary.next-dialog-btn');
         ReactTestUtils.Simulate.click(okBtn);
         await delay(40);
+        // no cache should unmount
         assert(!document.querySelector('.next-dialog'));
 
         ReactTestUtils.Simulate.click(btn);