fix: Arrow logic adjust (#753)

* fix: arrow offset

* chore: fix offset logic

Author: zombieJ

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>
   );

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,14 @@ 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 arrowWidth = arrowRef.current?.offsetWidth || 0;
+
+      const maxOffset = containerWidth - arrowWidth;
+      if (activeOffset <= maxOffset) {
         setContainerOffset(0);
+      } else {
+        setContainerOffset(activeOffset + arrowWidth - containerWidth);
       }
     }
   }, [containerWidth, activeOffset, range]);
@@ -197,6 +202,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 }}
         />

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;

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();
   });