Fix：RangePicker the triangle sign was not positioned correctly in some cases

src/PickerInput/Popup/index.tsx

@@ -84,7 +84,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     onSubmit,
   } = props;
 
-  const { prefixCls } = React.useContext(PickerContext);
+  const { prefixCls, alignedPlacement } = React.useContext(PickerContext);
   const panelPrefixCls = `${prefixCls}-panel`;
 
   const rtl = direction === 'rtl';
@@ -213,7 +213,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   );
 
   if (range) {
-    const realPlacement = getRealPlacement(placement, rtl);
+    const realPlacement = getRealPlacement(alignedPlacement || placement, rtl);
     const offsetUnit = getoffsetUnit(realPlacement, rtl);
     renderNode = (
       <div

src/PickerInput/RangePicker.tsx

@@ -666,6 +666,9 @@ function RangePicker<DateType extends object = any>(
     onKeyDown?.(event, preventDefault);
   };
 
+  // =======================  popup align =======================
+  const [alignedPlacement, setAlignedPlacement] = React.useState<string>();
+
   // ======================= Context ========================
   const context = React.useMemo(
     () => ({
@@ -674,8 +677,18 @@ function RangePicker<DateType extends object = any>(
       generateConfig,
       button: components.button,
       input: components.input,
+      alignedPlacement,
+      setAlignedPlacement,
     }),
-    [prefixCls, locale, generateConfig, components.button, components.input],
+    [
+      prefixCls,
+      locale,
+      generateConfig,
+      components.button,
+      components.input,
+      alignedPlacement,
+      setAlignedPlacement,
+    ],
   );
 
   // ======================== Effect ========================
@@ -739,6 +752,7 @@ function RangePicker<DateType extends object = any>(
         // Visible
         visible={mergedOpen}
         onClose={onPopupClose}
+        alignedPlacement={alignedPlacement}
         // Range
         range
       >

src/PickerInput/Selector/RangeSelector.tsx

@@ -9,6 +9,7 @@ import useRootProps from './hooks/useRootProps';
 import Icon, { ClearIcon } from './Icon';
 import Input, { type InputRef } from './Input';
 import { getoffsetUnit, getRealPlacement } from '../../utils/uiUtil';
+import { getWin } from './util';
 
 export type SelectorIdType =
   | string
@@ -120,7 +121,7 @@ function RangeSelector<DateType extends object = any>(
   const rtl = direction === 'rtl';
 
   // ======================== Prefix ========================
-  const { prefixCls } = React.useContext(PickerContext);
+  const { prefixCls, alignedPlacement } = React.useContext(PickerContext);
 
   // ========================== Id ==========================
   const ids = React.useMemo(() => {
@@ -173,7 +174,7 @@ function RangeSelector<DateType extends object = any>(
   });
 
   // ====================== ActiveBar =======================
-  const realPlacement = getRealPlacement(placement, rtl);
+  const realPlacement = getRealPlacement(alignedPlacement || placement, rtl);
   const offsetUnit = getoffsetUnit(realPlacement, rtl);
   const placementRight = realPlacement?.toLowerCase().endsWith('right');
   const [activeBarStyle, setActiveBarStyle] = React.useState<React.CSSProperties>({
@@ -184,21 +185,34 @@ function RangeSelector<DateType extends object = any>(
   const syncActiveOffset = useEvent(() => {
     const input = getInput(activeIndex);
     if (input) {
-      const { offsetWidth, offsetLeft, offsetParent } = input.nativeElement;
-      const parentWidth = (offsetParent as HTMLElement)?.offsetWidth || 0;
-      const activeOffset = placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft;
+      const { offsetParent } = input.nativeElement;
+      // offsetLeft is an integer, which will cause incorrect reulst.
+      const { x = 0, width: inputWidth = 0 } = input.nativeElement.getBoundingClientRect() || {};
+      const { x: pX = 0, width: parentWidth = 0 } = offsetParent?.getBoundingClientRect() || {};
+      const parentStyles =
+        offsetParent && getWin(offsetParent as HTMLElement).getComputedStyle(offsetParent);
+      const parentBorderRightWidth = Number(
+        (placementRight ? parentStyles?.borderRightWidth : parentStyles?.borderLeftWidth)?.replace(
+          'px',
+          '',
+        ) || 0,
+      );
+      const offsetLeft = x - pX;
+
+      const activeOffset = placementRight ? parentWidth - inputWidth - offsetLeft : offsetLeft;
       setActiveBarStyle(({ insetInlineStart, insetInlineEnd, ...rest }) => ({
         ...rest,
-        width: offsetWidth,
-        [offsetUnit]: activeOffset
+        width: inputWidth,
+        // parent will have border while focus, so need to  cut `parentBorderWidth` on opposite side.
+        [offsetUnit]: activeOffset - parentBorderRightWidth,
       }));
       onActiveOffset(activeOffset);
     }
   });
 
   React.useEffect(() => {
     syncActiveOffset();
-  }, [activeIndex]);
+  }, [activeIndex, alignedPlacement]);
 
   // ======================== Clear =========================
   const showClear = clearIcon && ((value[0] && !disabled[0]) || (value[1] && !disabled[1]));

src/PickerInput/Selector/util.ts

@@ -12,4 +12,8 @@ export function getMaskRange(key: string): [startVal: number, endVal: number, de
   };
 
   return PresetRange[key];
-}
+}
+
+export function getWin(ele: HTMLElement) {
+  return ele.ownerDocument.defaultView;
+}

src/PickerInput/context.tsx

@@ -9,7 +9,9 @@ export interface PickerContextProps<DateType = any> {
   /** Customize button component */
   button?: Components['button'];
   input?: Components['input'];
-
+  /** trigger will change placement while aligining */
+  alignedPlacement?: string;
+  setAlignedPlacement?: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const PickerContext = React.createContext<PickerContextProps>(null!);

src/PickerTrigger/index.tsx

@@ -54,7 +54,7 @@ export type PickerTriggerProps = {
   placement?: string;
   builtinPlacements?: BuildInPlacements;
   direction?: 'ltr' | 'rtl';
-
+  alignedPlacement?: string;
   // Visible
   visible: boolean;
   onClose: () => void;
@@ -72,15 +72,15 @@ function PickerTrigger({
   placement,
   builtinPlacements = BUILT_IN_PLACEMENTS,
   direction,
-
+  alignedPlacement,
   // Visible
   visible,
   onClose,
 }: PickerTriggerProps) {
-  const { prefixCls } = React.useContext(PickerContext);
+  const { prefixCls, setAlignedPlacement } = React.useContext(PickerContext);
   const dropdownPrefixCls = `${prefixCls}-dropdown`;
 
-  const realPlacement = getRealPlacement(placement, direction === 'rtl');
+  const realPlacement = getRealPlacement(alignedPlacement || placement, direction === 'rtl');
 
   return (
     <Trigger
@@ -100,6 +100,19 @@ function PickerTrigger({
       popupStyle={popupStyle}
       stretch="minWidth"
       getPopupContainer={getPopupContainer}
+      onPopupAlign={(_, align) => {
+        if (!setAlignedPlacement) return;
+
+        const matchedKey = Object.keys(BUILT_IN_PLACEMENTS).find(
+          (key) =>
+            BUILT_IN_PLACEMENTS[key].points[0] === align.points[0] &&
+            BUILT_IN_PLACEMENTS[key].points[1] === align.points[1],
+        );
+
+        if (matchedKey) {
+          setAlignedPlacement(matchedKey);
+        }
+      }}
       onPopupVisibleChange={(nextVisible) => {
         if (!nextVisible) {
           onClose();