From 79ec125d5cfdabf6252f642cec141535994bd418 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Mon, 17 Feb 2025 20:02:15 +0800
Subject: [PATCH 1/2] fix: arrow position retry

---
 src/PickerInput/Popup/index.tsx         | 12 +++++++++++-
 tests/__snapshots__/range.spec.tsx.snap |  8 ++++----
 tests/range.spec.tsx                    |  1 +
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/PickerInput/Popup/index.tsx b/src/PickerInput/Popup/index.tsx
index 9f8cf65e3..37e12f68f 100644
--- a/src/PickerInput/Popup/index.tsx
+++ b/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[]) {
diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap
index 7d51c4223..79f89de92 100644
--- a/tests/__snapshots__/range.spec.tsx.snap
+++ b/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"
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index 79bef79d5..409fcc914 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -1832,6 +1832,7 @@ describe('Picker.Range', () => {
           width,
           left,
           right: left + width,
+          height: 1,
         };
       },
       offsetWidth: {

From 49778e37d25eac8777fd97e93e04fdd2aef75dfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Mon, 17 Feb 2025 20:07:06 +0800
Subject: [PATCH 2/2] test: update snapshot

---
 tests/__snapshots__/range.spec.tsx.snap | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap
index 79f89de92..7d51c4223 100644
--- a/tests/__snapshots__/range.spec.tsx.snap
+++ b/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: 100px; left: 100px;"
+        style="position: absolute; width: 0px; left: 0px;"
       />
     </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; min-width: 200px;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
     >
       <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: 100px; left: 100px;"
+        style="position: absolute; width: 0px; left: 0px;"
       />
     </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; min-width: 200px;"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
     >
       <div
         class="rc-picker-range-wrapper rc-picker-month-range-wrapper"