fix: motion lock

Author: zombieJ

docs/examples/multiple-Portal.tsx

@@ -46,8 +46,19 @@ const Demo: React.FC = () => {
       <button type="button" onClick={onToggleDialog}>
         open dialog
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          setShowDialog(true);
+          setTimeout(() => {
+            setShowDialog(false);
+          }, 0);
+        }}
+      >
+        quick
+      </button>
       {dialog}
-      {/* {drawer} */}
+      {drawer}
     </div>
   );
 };

package.json

@@ -52,7 +52,7 @@
     "@rc-component/portal": "^1.0.0-8",
     "@rc-component/util": "^1.0.1",
     "classnames": "^2.2.6",
-    "@rc-component/motion": "^1.1.0"
+    "@rc-component/motion": "^1.1.3"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.2",

src/Dialog/Content/Panel.tsx

@@ -17,12 +17,12 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
   holderRef?: React.Ref<HTMLDivElement>;
 }
 
-export type ContentRef = {
+export type PanelRef = {
   focus: () => void;
   changeActive: (next: boolean) => void;
 };
 
-const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
+const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
   const {
     prefixCls,
     className,

src/Dialog/Content/index.tsx

@@ -3,10 +3,13 @@ import { useRef } from 'react';
 import classNames from 'classnames';
 import CSSMotion from '@rc-component/motion';
 import { offset } from '../../util';
-import type { PanelProps, ContentRef } from './Panel';
+import type { PanelProps, PanelRef } from './Panel';
 import Panel from './Panel';
 
-console.log(CSSMotion);
+export type ContentRef = PanelRef & {
+  inMotion: () => boolean;
+  enableMotion: () => boolean;
+};
 
 export type ContentProps = {
   motionName: string;
@@ -34,6 +37,15 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
     inMotion: () => boolean;
   }>();
 
+  const panelRef = useRef<PanelRef>();
+
+  // ============================== Refs ==============================
+  React.useImperativeHandle(ref, () => ({
+    ...panelRef.current,
+    inMotion: dialogRef.current.inMotion,
+    enableMotion: dialogRef.current.enableMotion,
+  }));
+
   // ============================= Style ==============================
   const [transformOrigin, setTransformOrigin] = React.useState<string>();
   const contentStyle: React.CSSProperties = {};
@@ -43,8 +55,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
   }
 
   function onPrepare() {
-    console.log('onPrepare', dialogRef.current);
-    const elementOffset = offset(dialogRef.current?.nativeElement);
+    const elementOffset = offset(dialogRef.current.nativeElement);
 
     setTransformOrigin(
       mousePosition && (mousePosition.x || mousePosition.y)
@@ -53,12 +64,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
     );
   }
 
-  const bbb = React.useCallback((aaa) => {
-    console.log('???', aaa);
-    dialogRef.current = aaa;
-  }, []);
-  console.log('render....');
-
   // ============================= Render =============================
   return (
     <CSSMotion
@@ -69,12 +74,12 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
       forceRender={forceRender}
       motionName={motionName}
       removeOnLeave={destroyOnClose}
-      ref={bbb}
+      ref={dialogRef}
     >
       {({ className: motionClassName, style: motionStyle }, motionRef) => (
         <Panel
           {...props}
-          ref={ref}
+          ref={panelRef}
           title={title}
           ariaId={ariaId}
           prefixCls={prefixCls}

src/Dialog/index.tsx

@@ -7,8 +7,7 @@ import * as React from 'react';
 import { useEffect, useRef } from 'react';
 import type { IDialogPropTypes } from '../IDialogPropTypes';
 import { getMotionName } from '../util';
-import Content from './Content';
-import type { ContentRef } from './Content/Panel';
+import Content, { type ContentRef } from './Content';
 import Mask from './Mask';
 import { warning } from '@rc-component/util/lib/warning';
 
@@ -78,27 +77,35 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
   }
 
   // ========================= Events =========================
+  // Close action will trigger by:
+  //   1. When hide motion end
+  //   2. Controlled `open` to `false` immediately after set to `true` which will not trigger motion
+  function doClose() {
+    // Clean up scroll bar & focus back
+    setAnimatedVisible(false);
+
+    if (mask && lastOutSideActiveElementRef.current && focusTriggerAfterClose) {
+      try {
+        lastOutSideActiveElementRef.current.focus({ preventScroll: true });
+      } catch (e) {
+        // Do nothing
+      }
+      lastOutSideActiveElementRef.current = null;
+    }
+
+    // Trigger afterClose only when change visible from true to false
+    if (animatedVisible) {
+      afterClose?.();
+    }
+  }
+
   function onDialogVisibleChanged(newVisible: boolean) {
     // Try to focus
     if (newVisible) {
       focusDialogContent();
     } else {
-      // Clean up scroll bar & focus back
-      setAnimatedVisible(false);
-
-      if (mask && lastOutSideActiveElementRef.current && focusTriggerAfterClose) {
-        try {
-          lastOutSideActiveElementRef.current.focus({ preventScroll: true });
-        } catch (e) {
-          // Do nothing
-        }
-        lastOutSideActiveElementRef.current = null;
-      }
-
-      // Trigger afterClose only when change visible from true to false
-      if (animatedVisible) {
-        afterClose?.();
-      }
+      console.log('hide???');
+      doClose();
     }
     afterOpenChange?.(newVisible);
   }
@@ -154,6 +161,12 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
     if (visible) {
       setAnimatedVisible(true);
       saveLastOutSideActiveElementRef();
+    } else if (
+      animatedVisible &&
+      contentRef.current.enableMotion() &&
+      !contentRef.current.inMotion()
+    ) {
+      doClose();
     }
   }, [visible]);
 

tests/index.spec.tsx

@@ -515,10 +515,17 @@ describe('dialog', () => {
       const afterClose = jest.fn();
 
       const { rerender } = render(<Dialog afterClose={afterClose} visible />);
-      jest.runAllTimers();
+      act(() => {
+        jest.runAllTimers();
+      });
 
+      console.log('~~~~~~false~~~~~~');
       rerender(<Dialog afterClose={afterClose} visible={false} />);
-      jest.runAllTimers();
+      console.log('~~~~~~111~~~~~~');
+      act(() => {
+        jest.runAllTimers();
+      });
+      console.log('~~~~~~222~~~~~~');
 
       expect(afterClose).toHaveBeenCalledTimes(1);
     });