From 347cff3ef038ab2ea5f640b115d03c161b5d8a7b Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 11 Jun 2024 23:12:16 +0800
Subject: [PATCH] fix: arrow position when placement is right again!

---
 src/PickerInput/Popup/index.tsx            | 4 ++--
 src/PickerInput/Selector/RangeSelector.tsx | 4 ++--
 tests/__snapshots__/range.spec.tsx.snap    | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/PickerInput/Popup/index.tsx b/src/PickerInput/Popup/index.tsx
index 846866424..8d1722665 100644
--- a/src/PickerInput/Popup/index.tsx
+++ b/src/PickerInput/Popup/index.tsx
@@ -208,7 +208,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   );
 
   if (range) {
-    const placementRight = placement?.toLowerCase().endsWith('right');
+    const placementRight = placement?.toLowerCase().endsWith('right') || rtl;
     renderNode = (
       <div
         ref={wrapperRef}
@@ -217,7 +217,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
         <div
           ref={arrowRef}
           className={`${prefixCls}-range-arrow`}
-          style={{ [rtl || placementRight ? 'right' : 'left']: activeOffset }}
+          style={{ [placementRight ? 'insetInlineEnd' : 'insetInlineStart']: activeOffset }}
         />
 
         {/* Watch for container size */}
diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx
index 85edf34d2..e0f7385e7 100644
--- a/src/PickerInput/Selector/RangeSelector.tsx
+++ b/src/PickerInput/Selector/RangeSelector.tsx
@@ -170,7 +170,8 @@ function RangeSelector<DateType extends object = any>(
   });
 
   // ====================== ActiveBar =======================
-  const offsetUnit = rtl ? 'insetInlineEnd' : 'insetInlineStart';
+  const placementRight = placement?.toLowerCase().endsWith('right') || rtl;
+  const offsetUnit = placementRight ? 'insetInlineEnd' : 'insetInlineStart';
 
   const [activeBarStyle, setActiveBarStyle] = React.useState<React.CSSProperties>({
     position: 'absolute',
@@ -188,7 +189,6 @@ function RangeSelector<DateType extends object = any>(
         width: offsetWidth,
         [offsetUnit]: offsetLeft,
       }));
-      const placementRight = placement?.toLowerCase().endsWith('right');
       onActiveOffset(placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft);
     }
   });
diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap
index ca7405946..4bd49b508 100644
--- a/tests/__snapshots__/range.spec.tsx.snap
+++ b/tests/__snapshots__/range.spec.tsx.snap
@@ -89,7 +89,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in pla
     </div>
     <div
       class="rc-picker-active-bar"
-      style="position: absolute; width: 0px; inset-inline-start: 0;"
+      style="position: absolute; width: 0px; inset-inline-end: 0;"
     />
   </div>
 </div>
@@ -184,7 +184,7 @@ exports[`Picker.Range panelRender 1`] = `
       >
         <div
           class="rc-picker-range-arrow"
-          style="left: 0px;"
+          style="inset-inline-start: 0;"
         />
         <div
           class="rc-picker-panel-container rc-picker-date-panel-container"
@@ -250,7 +250,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
       >
         <div
           class="rc-picker-range-arrow"
-          style="left: 0px;"
+          style="inset-inline-start: 0;"
         />
         <div
           class="rc-picker-panel-container rc-picker-date-panel-container"
@@ -1307,7 +1307,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
       >
         <div
           class="rc-picker-range-arrow"
-          style="left: 0px;"
+          style="inset-inline-start: 0;"
         />
         <div
           class="rc-picker-panel-container rc-picker-month-panel-container"