fix: active bar always offset 1px

Author: bbb169

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
@@ -184,13 +185,26 @@ 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(({ position }) => ({
         position,
-        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);
     }

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;
+}