Only update values that are out of range.

react-component · Oct 7, 2017 · 310daf2 · 310daf2
1 parent 0a07ada
commit 310daf2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/Range.jsx b/src/Range.jsx
@@ -61,8 +61,18 @@ class Range extends React.Component {
     if (nextBounds.length === bounds.length && nextBounds.every((v, i) => v === bounds[i])) return;
 
     this.setState({ bounds: nextBounds });
+
     if (bounds.some(v => utils.isValueOutOfRange(v, nextProps))) {
-      this.props.onChange(nextBounds);
+      const newValues = value.map((v) => {
+        if (v < nextBounds[0]) {
+          v = nextBounds[0];
+        }
+        if (v > nextBounds[1]) {
+          v = nextBounds[1];
+        }
+        return v;
+      });
+      this.props.onChange(newValues);
     }
   }
 

diff --git a/tests/Range.test.js b/tests/Range.test.js
@@ -79,6 +79,14 @@ describe('Range', () => {
     expect(wrapper.find('.rc-slider-handle').length).toBe(2);
   });
 
+  it('should only update bounds that are out of range', () => {
+    const props = { min: 0, max: 10000, value: [0.01, 10000], onChange: jest.fn() };
+    const range = mount(<Range {...props} />);
+    range.setProps({ min: 0, max: 500 });
+
+    expect(props.onChange).toHaveBeenCalledWith([0.01, 500]);
+  });
+
   // https://github.com/react-component/slider/pull/256
   it('should handle mutli handle mouseEnter correctly', () => {
     const wrapper = mount(<RangeWithTooltip min={0} max={1000} defaultValue={[50, 55]} />);