diff --git a/docs/examples/marks.tsx b/docs/examples/marks.tsx index 42320a136..72bba0e20 100644 --- 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)} /> diff --git a/src/Slider.tsx b/src/Slider.tsx index 033e41699..90d278b0d 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -385,12 +385,22 @@ const Slider = React.forwardRef>((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 index deefbdb32..56e342654 100644 --- 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(); + const onChange = jest.fn(); + const onChangeComplete = jest.fn(); + const { container } = render(); 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