fix: handler do not move when click track and move without mouseup (#948)

* fix: handle do not move when click track and move

* chore: ugprade devDeps

* chore: fix lint

* test: add drag test case

Author: afc163

package.json

@@ -71,8 +71,8 @@
     "less": "^3.10.3",
     "np": "^7.0.0",
     "rc-test": "^7.0.15",
-    "rc-tooltip": "^5.0.1",
-    "rc-trigger": "^5.0.4",
+    "rc-tooltip": "^6.1.2",
+    "rc-trigger": "^5.3.4",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "regenerator-runtime": "^0.13.9",

src/Slider.tsx

@@ -288,7 +288,23 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
     setValue(cloneNextValues);
   };
 
-  const changeToCloseValue = (newValue: number) => {
+  const finishChange = () => {
+    onAfterChange?.(getTriggerValue(rawValuesRef.current));
+  };
+
+  const [draggingIndex, draggingValue, cacheValues, onStartDrag] = useDrag(
+    containerRef,
+    direction,
+    rawValues,
+    mergedMin,
+    mergedMax,
+    formatValue,
+    triggerChange,
+    finishChange,
+    offsetValues,
+  );
+
+  const changeToCloseValue = (newValue: number, e?: React.MouseEvent) => {
     if (!disabled) {
       let valueIndex = 0;
       let valueDist = mergedMax - mergedMin;
@@ -314,6 +330,9 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
       onBeforeChange?.(getTriggerValue(cloneNextValues));
       triggerChange(cloneNextValues);
       onAfterChange?.(getTriggerValue(cloneNextValues));
+      if (e) {
+        onStartDrag(e, valueIndex, cloneNextValues);
+      }
     }
   };
 
@@ -344,7 +363,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
     }
 
     const nextValue = mergedMin + percent * (mergedMax - mergedMin);
-    changeToCloseValue(formatValue(nextValue));
+    changeToCloseValue(formatValue(nextValue), e);
   };
 
   // =========================== Keyboard ===========================
@@ -384,22 +403,6 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
     return draggableTrack;
   }, [draggableTrack, mergedStep]);
 
-  const finishChange = () => {
-    onAfterChange?.(getTriggerValue(rawValuesRef.current));
-  };
-
-  const [draggingIndex, draggingValue, cacheValues, onStartDrag] = useDrag(
-    containerRef,
-    direction,
-    rawValues,
-    mergedMin,
-    mergedMax,
-    formatValue,
-    triggerChange,
-    finishChange,
-    offsetValues,
-  );
-
   const onStartMove: OnStartMove = (e, valueIndex) => {
     onStartDrag(e, valueIndex);
 

src/hooks/useDrag.ts

@@ -93,14 +93,16 @@ export default function useDrag(
   const updateCacheValueRef = React.useRef(updateCacheValue);
   updateCacheValueRef.current = updateCacheValue;
 
-  const onStartMove: OnStartMove = (e, valueIndex) => {
+  const onStartMove: OnStartMove = (e, valueIndex, startValues?: number[]) => {
     e.stopPropagation();
 
-    const originValue = rawValues[valueIndex];
+    // 如果是点击 track 触发的，需要传入变化后的初始值，而不能直接用 rawValues
+    const initialValues = startValues || rawValues;
+    const originValue = initialValues[valueIndex];
 
     setDraggingIndex(valueIndex);
     setDraggingValue(originValue);
-    setOriginValues(rawValues);
+    setOriginValues(initialValues);
 
     const { pageX: startX, pageY: startY } = getPosition(e);
 

src/interface.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 
 export type Direction = 'rtl' | 'ltr' | 'ttb' | 'btt';
 
-export type OnStartMove = (e: React.MouseEvent | React.TouchEvent, valueIndex: number) => void;
+export type OnStartMove = (e: React.MouseEvent | React.TouchEvent, valueIndex: number, startValues?: number[]) => void;
 
 export type AriaValueFormat = (value: number) => string;
 

tests/Slider.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, createEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import keyCode from 'rc-util/lib/KeyCode';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
@@ -609,4 +609,20 @@ describe('Slider', () => {
     });
     expect(onAfterChange).toHaveBeenCalledWith(20);
   });
+
+  // https://github.com/react-component/slider/pull/948
+  it('could drag handler after click tracker', () => {
+    const onChange = jest.fn();
+    const { container } = render(<Slider onChange={onChange} />);
+    fireEvent.mouseDown(container.querySelector('.rc-slider'), {
+      clientX: 20,
+    });
+    expect(onChange).toHaveBeenLastCalledWith(20);
+
+    // Drag
+    const mouseMove = createEvent.mouseMove(document);
+    mouseMove.pageX = 100;
+    fireEvent(document, mouseMove);
+    expect(onChange).toHaveBeenLastCalledWith(100);
+  });
 });