diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx index 7cd36bd29..3a3a25906 100644 --- a/src/PickerInput/Selector/RangeSelector.tsx +++ b/src/PickerInput/Selector/RangeSelector.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames'; import ResizeObserver from 'rc-resize-observer'; import { useEvent } from 'rc-util'; +import omit from 'rc-util/lib/omit'; import * as React from 'react'; import type { RangePickerRef, SelectorProps } from '../../interface'; import PickerContext from '../context'; @@ -9,6 +10,7 @@ import useRootProps from './hooks/useRootProps'; import Icon, { ClearIcon } from './Icon'; import Input, { type InputRef } from './Input'; import { getoffsetUnit, getRealPlacement } from '../../utils/uiUtil'; +import usePrevious from './hooks/usePrevious'; export type SelectorIdType = | string @@ -175,6 +177,7 @@ function RangeSelector( // ====================== ActiveBar ======================= const realPlacement = getRealPlacement(placement, rtl); const offsetUnit = getoffsetUnit(realPlacement, rtl); + const prevOffsetUnit = usePrevious(offsetUnit); const placementRight = realPlacement?.toLowerCase().endsWith('right'); const [activeBarStyle, setActiveBarStyle] = React.useState({ position: 'absolute', @@ -188,7 +191,7 @@ function RangeSelector( const parentWidth = (offsetParent as HTMLElement)?.offsetWidth || 0; const activeOffset = placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft; setActiveBarStyle((ori) => ({ - ...ori, + ...omit(ori, [prevOffsetUnit]), width: offsetWidth, [offsetUnit]: activeOffset, })); diff --git a/src/PickerInput/Selector/hooks/usePrevious.ts b/src/PickerInput/Selector/hooks/usePrevious.ts new file mode 100644 index 000000000..a26a75ec3 --- /dev/null +++ b/src/PickerInput/Selector/hooks/usePrevious.ts @@ -0,0 +1,15 @@ +import { useRef } from 'react'; + +function usePrevious(state: T): T | undefined { + const prevRef = useRef(); + const curRef = useRef(); + + if (!Object.is(curRef.current, state)) { + prevRef.current = curRef.current; + curRef.current = state; + } + + return prevRef.current; +} + +export default usePrevious;