fix: onChangeComplete should be triggered when click marks (#1015)

react-component · Jul 25, 2024 · ce5d307 · ce5d307
1 parent 9c055f5
commit ce5d307
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/docs/examples/marks.tsx b/docs/examples/marks.tsx
@@ -50,7 +50,7 @@ export default () => (
         defaultValue={[-10, 0]}
         allowCross={false}
         pushable
-        draggableTrack
+        onChangeComplete={(v) => console.log('AfterChange:', v)}
       />
     </div>
 

diff --git a/src/Slider.tsx b/src/Slider.tsx
@@ -385,12 +385,22 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
         cloneNextValues.push(newValue);
       }
 
-      onBeforeChange?.(getTriggerValue(cloneNextValues));
+      const nextValue = getTriggerValue(cloneNextValues);
+      onBeforeChange?.(nextValue);
       triggerChange(cloneNextValues);
+
       if (e) {
         (document.activeElement as HTMLElement)?.blur?.();
         handlesRef.current.focus(focusIndex);
         onStartDrag(e, focusIndex, cloneNextValues);
+      } else {
+        // https://github.com/ant-design/ant-design/issues/49997
+        onAfterChange?.(nextValue);
+        warning(
+          !onAfterChange,
+          '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.',
+        );
+        onChangeComplete?.(nextValue);
       }
     }
   };

diff --git a/tests/marks.test.js b/tests/marks.test.js
@@ -35,13 +35,18 @@ describe('marks', () => {
 
   it('should select correct value while click on marks', () => {
     const marks = { 0: '0', 30: '30', 100: '100' };
-
-    const { container } = render(<Slider marks={marks} />);
+    const onChange = jest.fn();
+    const onChangeComplete = jest.fn();
+    const { container } = render(<Slider marks={marks} onChange={onChange} onChangeComplete={onChangeComplete} />);
     fireEvent.click(container.getElementsByClassName('rc-slider-mark-text')[1]);
     expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
       'aria-valuenow',
       '30',
     );
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(30);
+    expect(onChangeComplete).toHaveBeenCalledTimes(1);
+    expect(onChangeComplete).toHaveBeenCalledWith(30);
   });
 
   // TODO: not implement yet