fix: drag out and back should trigger (#1013)

Author: zombieJ

docs/examples/editable.tsx

@@ -33,6 +33,12 @@ export default () => {
           onChangeComplete={(nextValue) => {
             console.log('Complete', nextValue);
           }}
+          // handleRender={(ori, handleProps) => {
+          //   if (handleProps.index === 0) {
+          //     console.log('handleRender', ori, handleProps);
+          //   }
+          //   return ori;
+          // }}
           styles={{
             rail: {
               background: `linear-gradient(to right, blue, red)`,

src/hooks/useDrag.ts

@@ -59,18 +59,16 @@ function useDrag(
 
   const flushValues = (nextValues: number[], nextValue?: number, deleteMark?: boolean) => {
     // Perf: Only update state when value changed
-    if (cacheValues.some((val, i) => val !== nextValues[i]) || deleteMark) {
-      if (nextValue !== undefined) {
-        setDraggingValue(nextValue);
-      }
-      setCacheValues(nextValues);
+    if (nextValue !== undefined) {
+      setDraggingValue(nextValue);
+    }
+    setCacheValues(nextValues);
 
-      let changeValues = nextValues;
-      if (deleteMark) {
-        changeValues = nextValues.filter((_, i) => i !== draggingIndex);
-      }
-      triggerChange(changeValues);
+    let changeValues = nextValues;
+    if (deleteMark) {
+      changeValues = nextValues.filter((_, i) => i !== draggingIndex);
     }
+    triggerChange(changeValues);
   };
 
   const updateCacheValue = useEvent(

tests/Range.test.tsx

@@ -53,6 +53,13 @@ describe('Range', () => {
     }
   }
 
+  function doMouseDrag(end: number) {
+    const mouseMove = createEvent.mouseMove(document);
+    (mouseMove as any).pageX = end;
+    (mouseMove as any).pageY = end;
+    fireEvent(document, mouseMove);
+  }
+
   function doMouseMove(
     container: HTMLElement,
     start: number,
@@ -62,10 +69,7 @@ describe('Range', () => {
     doMouseDown(container, start, element);
 
     // Drag
-    const mouseMove = createEvent.mouseMove(document);
-    (mouseMove as any).pageX = end;
-    (mouseMove as any).pageY = end;
-    fireEvent(document, mouseMove);
+    doMouseDrag(end);
   }
 
   function doTouchMove(
@@ -695,6 +699,31 @@ describe('Range', () => {
         expect(onChangeComplete).toHaveBeenCalledWith([50, 100]);
       });
 
+      it('out and back', () => {
+        const onChange = jest.fn();
+        const onChangeComplete = jest.fn();
+        const { container } = render(
+          <Slider
+            onChange={onChange}
+            onChangeComplete={onChangeComplete}
+            min={0}
+            max={100}
+            defaultValue={[0, 50]}
+            range={{ editable: true }}
+          />,
+        );
+
+        doMouseMove(container, 0, 1000);
+        expect(onChange).toHaveBeenCalledWith([50]);
+
+        doMouseDrag(0);
+        expect(onChange).toHaveBeenCalledWith([0, 50]);
+
+        // Fire mouse up
+        fireEvent.mouseUp(container.querySelector('.rc-slider-handle'));
+        expect(onChangeComplete).toHaveBeenCalledWith([0, 50]);
+      });
+
       it('controlled', () => {
         const onChange = jest.fn();
         const onChangeComplete = jest.fn();