fix: motion should mark as init for first mount

react-component · Feb 15, 2023 · 0c71552 · 0c71552
1 parent 6b021c8
commit 0c71552
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -12,4 +12,12 @@ export default defineConfig({
     name: 'Trigger',
     logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
   },
+  styles: [
+    `
+      .dumi-default-previewer-demo {
+        position: relative;
+        min-height: 300px;
+      }
+    `,
+  ]
 });
diff --git a/docs/examples/inside.tsx b/docs/examples/inside.tsx
@@ -51,7 +51,7 @@ export default () => {
   return (
     <div
       style={{
-        position: 'fixed',
+        position: 'absolute',
         inset: 64,
         overflow: `auto`,
         border: '1px solid red',

diff --git a/src/index.tsx b/src/index.tsx
@@ -121,7 +121,9 @@ export interface TriggerProps {
   // mobile?: MobileConfig;
 }
 
-export function generateTrigger(PortalComponent: React.ComponentType<any> = Portal) {
+export function generateTrigger(
+  PortalComponent: React.ComponentType<any> = Portal,
+) {
   const Trigger = React.forwardRef<TriggerRef, TriggerProps>((props, ref) => {
     const {
       prefixCls = 'rc-trigger-popup',
@@ -303,9 +305,13 @@ export function generateTrigger(PortalComponent: React.ComponentType<any> = Port
 
     // ========================== Motion ============================
     const [inMotion, setInMotion] = React.useState(false);
+    const mountRef = React.useRef(true);
 
     useLayoutEffect(() => {
-      setInMotion(true);
+      if (!mountRef.current || mergedOpen) {
+        setInMotion(true);
+      }
+      mountRef.current = true;
     }, [mergedOpen]);
 
     const [motionPrepareResolve, setMotionPrepareResolve] =

diff --git a/tests/motion.test.jsx b/tests/motion.test.jsx
@@ -39,7 +39,7 @@ describe('Trigger.Motion', () => {
     fireEvent.click(target);
 
     expect(document.querySelector('.rc-trigger-popup')).toHaveClass(
-      'bamboo-enter',
+      'bamboo-appear',
     );
 
     expect(