fix: Align not waiting (#298)

* fix: align queue

* chore: commented

* chore: commente

Author: zombieJ

src/Popup/PopupInner.tsx

@@ -102,9 +102,23 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
     const [status, goNextStatus] = useVisibleStatus(visible, doMeasure);
 
     // ======================== Aligns ========================
-    const [alignInfo, setAlignInfo] = useState<AlignType>(null);
+    /**
+     * `alignedClassName` may modify `source` size,
+     * which means one time align may not move to the correct position at once.
+     *
+     * We will reset `alignTimes` for each status switch to `alignPre`
+     * and let `rc-align` to align for multiple times to ensure get final stable place.
+     * Currently we mark `alignTimes < 2` repeat align, it will increase if user report for align issue.
+     */
+    const [alignTimes, setAlignTimes] = useState(0);
     const prepareResolveRef = useRef<(value?: unknown) => void>();
 
+    useLayoutEffect(() => {
+      if (status === 'alignPre') {
+        setAlignTimes(0);
+      }
+    }, [status]);
+
     // `target` on `rc-align` can accept as a function to get the bind element or a point.
     // ref: https://www.npmjs.com/package/rc-align
     function getAlignTarget() {
@@ -120,11 +134,13 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
 
     function onInternalAlign(popupDomNode: HTMLElement, matchAlign: AlignType) {
       const nextAlignedClassName = getClassNameFromAlign(matchAlign);
+
       if (alignedClassName !== nextAlignedClassName) {
         setAlignedClassName(nextAlignedClassName);
       }
 
-      setAlignInfo(matchAlign);
+      // We will retry multi times to make sure that the element has been align in the right position.
+      setAlignTimes((val) => val + 1);
 
       if (status === 'align') {
         onAlign?.(popupDomNode, matchAlign);
@@ -133,19 +149,17 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
 
     // Delay to go to next status
     useLayoutEffect(() => {
-      if (alignInfo && status === 'align') {
-        const nextAlignedClassName = getClassNameFromAlign(alignInfo);
-
+      if (status === 'align') {
         // Repeat until not more align needed
-        if (alignedClassName !== nextAlignedClassName) {
+        if (alignTimes < 2) {
           forceAlign();
         } else {
           goNextStatus(function () {
             prepareResolveRef.current?.();
           });
         }
       }
-    }, [alignInfo]);
+    }, [alignTimes]);
 
     // ======================== Motion ========================
     const motion = { ...getMotion(props) };

src/Popup/useVisibleStatus.ts

@@ -12,11 +12,24 @@ import useState from 'rc-util/lib/hooks/useState';
  * motion - play the motion
  * stable - everything is done
  */
-type PopupStatus = null | 'measure' | 'align' | 'aligned' | 'motion' | 'stable';
+type PopupStatus =
+  | null
+  | 'measure'
+  | 'alignPre'
+  | 'align'
+  | 'aligned'
+  | 'motion'
+  | 'stable';
 
 type Func = () => void;
 
-const StatusQueue: PopupStatus[] = ['measure', 'align', null, 'motion'];
+const StatusQueue: PopupStatus[] = [
+  'measure',
+  'alignPre',
+  'align',
+  null,
+  'motion',
+];
 
 export default (
   visible: boolean,

tests/point.test.jsx

@@ -38,7 +38,11 @@ describe('Trigger.Point', () => {
   function trigger(container, eventName, data) {
     const pointRegion = container.querySelector('.point-region');
     fireEvent(pointRegion, getMouseEvent(eventName, data));
-    act(() => jest.runAllTimers());
+
+    // React scheduler will not hold when useEffect. We need repeat to tell that times go
+    for (let i = 0; i < 10; i += 1) {
+      act(() => jest.runAllTimers());
+    }
   }
 
   it('onClick', async () => {