fix: arrow position when placement is right again! (#825)

react-component · Jun 11, 2024 · b77d139 · b77d139
1 parent 043c726
commit b77d139
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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"