chore: fix logic

react-component · Apr 18, 2024 · 9a5468d · 9a5468d
1 parent 56bd4f5
commit 9a5468d
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/src/Handles/Handle.tsx b/src/Handles/Handle.tsx
@@ -23,7 +23,10 @@ export interface HandleProps
   onOffsetChange: (value: number | 'min' | 'max', valueIndex: number) => void;
   onFocus: (e: React.FocusEvent<HTMLDivElement>, index: number) => void;
   onMouseEnter: (e: React.MouseEvent<HTMLDivElement>, index: number) => void;
-  render?: (origin: React.ReactElement<HandleProps>, props: RenderProps) => React.ReactElement;
+  render?: (
+    origin: React.ReactElement<React.HTMLAttributes<HTMLDivElement>>,
+    props: RenderProps,
+  ) => React.ReactElement;
   onChangeComplete?: () => void;
 }
 

diff --git a/src/Handles/index.tsx b/src/Handles/index.tsx
@@ -97,12 +97,13 @@ const Handles = React.forwardRef<HandlesRef, HandlesProps>((props, ref) => {
         <Handle
           key="a11y"
           {...handleProps}
-          aria-hidden
           value={values[activeIndex]}
           valueIndex={0}
           dragging={draggingIndex !== -1}
           render={activeHandleRender}
           style={{ pointerEvents: 'none' }}
+          tabIndex={-1}
+          aria-hidden
         />
       )}
     </>

diff --git a/src/Slider.tsx b/src/Slider.tsx
@@ -291,12 +291,13 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   };
 
   const finishChange = () => {
-    onAfterChange?.(getTriggerValue(rawValuesRef.current));
+    const finishValue = getTriggerValue(rawValuesRef.current);
+    onAfterChange?.(finishValue);
     warning(
       !onAfterChange,
       '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.',
     );
-    onChangeComplete?.(getTriggerValue(rawValuesRef.current));
+    onChangeComplete?.(finishValue);
   };
 
   const [draggingIndex, draggingValue, cacheValues, onStartDrag] = useDrag(

diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts
@@ -32,7 +32,7 @@ function useDrag(
   const mouseMoveEventRef = React.useRef<(event: MouseEvent) => void>(null);
   const mouseUpEventRef = React.useRef<(event: MouseEvent) => void>(null);
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (draggingIndex === -1) {
       setCacheValues(rawValues);
     }