fix: align jump for the first time render (#421)

* fix: align should trigger before motion

* test: add test case

* chore: reorder

* test: update snapshot

Author: zombieJ

docs/examples/simple.tsx

@@ -69,7 +69,7 @@ const RefTarget = React.forwardRef((props, ref) => {
 interface TestState {
   mask: boolean;
   maskClosable: boolean;
-  placement: 'right';
+  placement: string;
   trigger: {
     click?: boolean;
     focus?: boolean;
@@ -90,13 +90,13 @@ class Test extends React.Component<any, TestState> {
   state: TestState = {
     mask: true,
     maskClosable: true,
-    placement: 'right',
+    placement: 'bottom',
     trigger: {
       click: true,
     },
     offsetX: undefined,
     offsetY: undefined,
-    stretch: '',
+    stretch: 'minWidth',
     transitionName: 'rc-trigger-popup-zoom',
   };
 

src/index.tsx

@@ -444,6 +444,23 @@ export function generateTrigger(
       forceAlign: triggerAlign,
     }));
 
+    // ========================== Stretch ===========================
+    const [targetWidth, setTargetWidth] = React.useState(0);
+    const [targetHeight, setTargetHeight] = React.useState(0);
+
+    const syncTargetSize = () => {
+      if (stretch && targetEle) {
+        const rect = targetEle.getBoundingClientRect();
+        setTargetWidth(rect.width);
+        setTargetHeight(rect.height);
+      }
+    };
+
+    const onTargetResize = () => {
+      syncTargetSize();
+      triggerAlign();
+    };
+
     // ========================== Motion ============================
     const onVisibleChanged = (visible: boolean) => {
       setInMotion(false);
@@ -454,6 +471,7 @@ export function generateTrigger(
     // We will trigger align when motion is in prepare
     const onPrepare = () =>
       new Promise<void>((resolve) => {
+        syncTargetSize();
         setMotionPrepareResolve(() => resolve);
       });
 
@@ -465,20 +483,6 @@ export function generateTrigger(
       }
     }, [motionPrepareResolve]);
 
-    // ========================== Stretch ===========================
-    const [targetWidth, setTargetWidth] = React.useState(0);
-    const [targetHeight, setTargetHeight] = React.useState(0);
-
-    const onTargetResize = (_: object, ele: HTMLElement) => {
-      triggerAlign();
-
-      if (stretch) {
-        const rect = ele.getBoundingClientRect();
-        setTargetWidth(rect.width);
-        setTargetHeight(rect.height);
-      }
-    };
-
     // =========================== Action ===========================
     /**
      * Util wrapper for trigger action

tests/basic.test.jsx

@@ -510,13 +510,14 @@ describe('Trigger.Basic', () => {
   });
 
   describe('stretch', () => {
-    const createTrigger = (stretch) =>
+    const createTrigger = (stretch, restProps) =>
       render(
         <Trigger
           action={['click']}
           popupAlign={placementAlignMap.left}
           popup={<strong className="x-content">tooltip2</strong>}
           stretch={stretch}
+          {...restProps}
         >
           <div className="target">
             click me to show trigger
@@ -530,6 +531,7 @@ describe('Trigger.Basic', () => {
     const height = 903;
     let domSpy;
     let rect = {};
+    let rectCalled = false;
 
     beforeAll(() => {
       domSpy = spyElementPrototypes(HTMLElement, {
@@ -540,23 +542,45 @@ describe('Trigger.Basic', () => {
           get: () => height,
         },
         getBoundingClientRect() {
+          rectCalled = true;
           return rect;
         },
       });
     });
 
+    beforeEach(() => {
+      rectCalled = false;
+    });
+
     afterAll(() => {
       domSpy.mockRestore();
     });
 
     [null, { width, height }].forEach((mockRect) => {
       ['width', 'height', 'min-width', 'min-height'].forEach((prop) => {
-        it(`${mockRect ? 'offset' : 'getBoundingClientRect'}: ${prop}`, () => {
-          const { container } = createTrigger(prop);
+        it(`${
+          mockRect ? 'offset' : 'getBoundingClientRect'
+        }: ${prop}`, async () => {
+          const onPopupAlign = jest.fn();
+
+          const { container } = createTrigger(prop, {
+            onPopupAlign,
+          });
           rect = mockRect || {};
 
+          expect(rectCalled).toBeFalsy();
+          expect(onPopupAlign).not.toHaveBeenCalled();
+
+          // Click will trigger `onPrepare` which need measure target size
           fireEvent.click(container.querySelector('.target'));
-          act(() => jest.runAllTimers());
+          expect(rectCalled).toBeTruthy();
+
+          // Flush for motion
+          await act(async () => {
+            jest.advanceTimersByTime(100);
+            await Promise.resolve();
+          });
+          expect(onPopupAlign).toHaveBeenCalled();
 
           expect(
             document.querySelector('.rc-trigger-popup').style,