diff --git a/docs/examples/multiple.tsx b/docs/examples/multiple.tsx index 5f5e96301..73fd94ada 100644 --- a/docs/examples/multiple.tsx +++ b/docs/examples/multiple.tsx @@ -31,7 +31,7 @@ export default () => { value={value} onChange={(nextValue) => { // console.log('>>>', nextValue); - setValue(nextValue as any); + // setValue(nextValue as any); }} activeHandleRender={(node) => {node}} styles={{ diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts index 7413ff0df..515e74cad 100644 --- a/src/hooks/useDrag.ts +++ b/src/hooks/useDrag.ts @@ -207,7 +207,10 @@ function useDrag( }); const maxDiffCount = editable ? 1 : 0; - const diffCount: number = Object.values(counts).reduce((prev, next) => prev + next, 0); + const diffCount: number = Object.values(counts).reduce( + (prev, next) => prev + Math.abs(next), + 0, + ); return diffCount <= maxDiffCount ? cacheValues : rawValues; }, [rawValues, cacheValues, editable]); diff --git a/tests/Range.test.tsx b/tests/Range.test.tsx index 6f7d5a220..616a3465f 100644 --- a/tests/Range.test.tsx +++ b/tests/Range.test.tsx @@ -199,6 +199,18 @@ describe('Range', () => { expect(container.getElementsByClassName('rc-slider-handle')).toHaveLength(2); }); + it('not moved if controlled', () => { + const onChange = jest.fn(); + const { container } = render(); + doMouseMove(container, 0, 9999999); + + expect(onChange).toHaveBeenCalled(); + + expect(container.querySelector('.rc-slider-handle-dragging')).toHaveStyle({ + left: '2%', + }); + }); + // Not trigger onChange anymore // it('should only update bounds that are out of range', () => { // const props = { min: 0, max: 10000, value: [0.01, 10000], onChange: jest.fn() };