fix: arrow position retry

Author: zombieJ

src/PickerInput/Popup/index.tsx

@@ -102,6 +102,11 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   };
 
   const [activeInputLeft, activeInputRight, selectorWidth] = activeInfo;
+  const [retryTimes, setRetryTimes] = React.useState(0);
+
+  React.useEffect(() => {
+    setRetryTimes(10);
+  }, [activeInputLeft]);
 
   React.useEffect(() => {
     // `activeOffset` is always align with the active input element
@@ -112,6 +117,11 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
 
       // Arrow Offset
       const wrapperRect = wrapperRef.current.getBoundingClientRect();
+      if (!wrapperRect.height || wrapperRect.right < 0) {
+        setRetryTimes((times) => Math.max(0, times - 1));
+        return;
+      }
+
       const nextArrowOffset =
         (rtl ? activeInputRight - arrowWidth : activeInputLeft) - wrapperRect.left;
       setArrowOffset(nextArrowOffset);
@@ -128,7 +138,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
         setContainerOffset(0);
       }
     }
-  }, [rtl, containerWidth, activeInputLeft, activeInputRight, selectorWidth, range]);
+  }, [retryTimes, rtl, containerWidth, activeInputLeft, activeInputRight, selectorWidth, range]);
 
   // ======================== Custom ========================
   function filterEmpty<T>(list: T[]) {

tests/__snapshots__/range.spec.tsx.snap

@@ -236,14 +236,14 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
       </div>
       <div
         class="rc-picker-active-bar"
-        style="position: absolute; width: 0px; left: 0px;"
+        style="position: absolute; width: 100px; left: 100px;"
       />
     </div>
   </div>
   <div>
     <div
       class="rc-picker-dropdown rc-picker-dropdown-range rc-picker-dropdown-placement-bottomLeft"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 200px;"
     >
       <div
         class="rc-picker-range-wrapper rc-picker-date-range-wrapper"
@@ -1293,14 +1293,14 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
       </div>
       <div
         class="rc-picker-active-bar"
-        style="position: absolute; width: 0px; left: 0px;"
+        style="position: absolute; width: 100px; left: 100px;"
       />
     </div>
   </div>
   <div>
     <div
       class="rc-picker-dropdown rc-picker-dropdown-range rc-picker-dropdown-placement-bottomLeft"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 200px;"
     >
       <div
         class="rc-picker-range-wrapper rc-picker-month-range-wrapper"

tests/range.spec.tsx

@@ -1832,6 +1832,7 @@ describe('Picker.Range', () => {
           width,
           left,
           right: left + width,
+          height: 1,
         };
       },
       offsetWidth: {