From 6ffb31cfc9ce3444f8cef0293d4920a1e301b527 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: Tue, 6 Feb 2024 17:55:34 +0800
Subject: [PATCH 1/2] fix: arrow offset

---
 docs/examples/debug.tsx                    |  6 ++++--
 src/PickerInput/Popup/index.tsx            | 13 ++++++++++---
 src/PickerInput/Selector/RangeSelector.tsx |  4 +++-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx
index 4e21d24d9..d2e2fa478 100644
--- a/docs/examples/debug.tsx
+++ b/docs/examples/debug.tsx
@@ -146,8 +146,10 @@ export default () => {
 
   return (
     <div>
+      <RangePicker {...sharedLocale} open picker="time" style={{ width: 400 }} />
+
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
-        <PickerPanel
+        {/* <PickerPanel
           generateConfig={dayjsGenerateConfig}
           locale={zhCN}
           value={value}
@@ -156,7 +158,7 @@ export default () => {
             console.error('1');
             console.log('🎲 PanelValue Change:', panelValue, mode);
           }}
-        />
+        /> */}
       </div>
     </div>
   );
diff --git a/src/PickerInput/Popup/index.tsx b/src/PickerInput/Popup/index.tsx
index ee6dca74e..3c5bc69b3 100644
--- a/src/PickerInput/Popup/index.tsx
+++ b/src/PickerInput/Popup/index.tsx
@@ -74,6 +74,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   const rtl = direction === 'rtl';
 
   // ========================= Refs =========================
+  const arrowRef = React.useRef<HTMLDivElement>(null);
   const wrapperRef = React.useRef<HTMLDivElement>(null);
 
   // ======================== Offset ========================
@@ -90,10 +91,15 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     // `activeOffset` is always align with the active input element
     // So we need only check container contains the `activeOffset`
     if (range) {
-      if (activeOffset + containerWidth < wrapperRef.current?.offsetWidth) {
-        setContainerOffset(activeOffset);
-      } else {
+      // Offset in case container has border radius
+      const PRESET_OFFSET = 15;
+      const arrowWidth = arrowRef.current?.offsetWidth || 0;
+
+      const maxOffset = containerWidth - PRESET_OFFSET - arrowWidth;
+      if (activeOffset <= maxOffset) {
         setContainerOffset(0);
+      } else {
+        setContainerOffset(activeOffset + arrowWidth + PRESET_OFFSET - containerWidth);
       }
     }
   }, [containerWidth, activeOffset, range]);
@@ -197,6 +203,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
         className={classNames(`${prefixCls}-range-wrapper`, `${prefixCls}-${picker}-range-wrapper`)}
       >
         <div
+          ref={arrowRef}
           className={`${prefixCls}-range-arrow`}
           style={{ [rtl ? 'right' : 'left']: activeOffset }}
         />
diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx
index be0927f38..4f5148926 100644
--- a/src/PickerInput/Selector/RangeSelector.tsx
+++ b/src/PickerInput/Selector/RangeSelector.tsx
@@ -174,7 +174,9 @@ function RangeSelector<DateType extends object = any>(
 
   const syncActiveOffset = useEvent(() => {
     const input = getInput(activeIndex);
-    if (input) {
+    if (activeIndex === 0) {
+      onActiveOffset(0);
+    } else if (input) {
       const { offsetWidth, offsetLeft, offsetParent } = input.nativeElement;
 
       let offset = offsetLeft;

From 077d65ea77e2a670997a71d44ee702c2a60f97f3 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: Wed, 7 Feb 2024 11:06:39 +0800
Subject: [PATCH 2/2] chore: fix offset logic

---
 src/PickerInput/Popup/index.tsx | 5 ++---
 tests/range.spec.tsx            | 5 +++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/PickerInput/Popup/index.tsx b/src/PickerInput/Popup/index.tsx
index 3c5bc69b3..af4eb0f43 100644
--- a/src/PickerInput/Popup/index.tsx
+++ b/src/PickerInput/Popup/index.tsx
@@ -92,14 +92,13 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     // So we need only check container contains the `activeOffset`
     if (range) {
       // Offset in case container has border radius
-      const PRESET_OFFSET = 15;
       const arrowWidth = arrowRef.current?.offsetWidth || 0;
 
-      const maxOffset = containerWidth - PRESET_OFFSET - arrowWidth;
+      const maxOffset = containerWidth - arrowWidth;
       if (activeOffset <= maxOffset) {
         setContainerOffset(0);
       } else {
-        setContainerOffset(activeOffset + arrowWidth + PRESET_OFFSET - containerWidth);
+        setContainerOffset(activeOffset + arrowWidth - containerWidth);
       }
     }
   }, [containerWidth, activeOffset, range]);
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index 94712c3fb..010582054 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -1659,7 +1659,7 @@ describe('Picker.Range', () => {
       offsetWidth: {
         get() {
           if (this.className.includes('range-arrow')) {
-            return 14;
+            return 0;
           } else if (this.className.includes('panel-container')) {
             return 312;
           } else if (this.className.includes('input')) {
@@ -1695,7 +1695,7 @@ describe('Picker.Range', () => {
       offsetWidth: {
         get() {
           if (this.className.includes('range-arrow')) {
-            return 14;
+            return 0;
           } else if (this.className.includes('panel-container')) {
             return 312;
           } else if (this.className.includes('input')) {
@@ -1722,6 +1722,7 @@ describe('Picker.Range', () => {
       />,
     );
     openPicker(container, 1);
+    console.log(document.querySelector<HTMLElement>('.rc-picker-panel-container').style.cssText);
     expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({ marginLeft: 0 });
     mock.mockRestore();
   });