diff --git a/src/Slider.tsx b/src/Slider.tsx index 463aed629..70afdb270 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -395,15 +395,34 @@ const Slider = React.forwardRef>((prop }); let focusIndex: number; + let valueOffset = 0; - if (effectiveRangeEditable && valueDist !== 0 && (!maxCount || rawValues.length < maxCount)) { + if (!rawValues.length) { + cloneNextValues.push(newValue); + focusIndex = 0; + } else if ( + effectiveRangeEditable && + valueDist !== 0 && + (!maxCount || rawValues.length < maxCount) + ) { cloneNextValues.splice(valueBeforeIndex + 1, 0, newValue); focusIndex = valueBeforeIndex + 1; } else { - cloneNextValues[valueIndex] = newValue; + valueOffset = newValue - rawValues[valueIndex]; focusIndex = valueIndex; } + if (rawValues.length) { + // Keep track clicks consistent with drag and keyboard constraints. + const { values: nextValues } = offsetValues( + cloneNextValues, + valueOffset, + focusIndex, + 'dist', + ); + cloneNextValues.splice(0, cloneNextValues.length, ...nextValues); + } + // Fill value to match default 2 (only when `rawValues` is empty) if (rangeEnabled && !rawValues.length && count === undefined) { cloneNextValues.push(newValue); diff --git a/tests/Range.test.tsx b/tests/Range.test.tsx index dd6ad0044..bcce2cea1 100644 --- a/tests/Range.test.tsx +++ b/tests/Range.test.tsx @@ -856,6 +856,35 @@ describe('Range', () => { }); }); + it('keeps pushable when clicking the track', () => { + const onChange = jest.fn(); + const { container } = render( + , + ); + + doMouseDown(container, 30, 'rc-slider', true); + fireEvent.mouseUp(document); + + expect(onChange).toHaveBeenLastCalledWith([10, 30]); + }); + + it('keeps pushable when inserting an editable handle', () => { + const onChange = jest.fn(); + const { container } = render( + , + ); + + doMouseDown(container, 30, 'rc-slider', true); + fireEvent.mouseUp(document); + + expect(onChange).toHaveBeenLastCalledWith([10, 30, 50]); + }); + describe('disabled as array', () => { const getHandle = (container: HTMLElement, index = 0) => container.getElementsByClassName('rc-slider-handle')[index] as HTMLElement;