should trigger onChange when min or max changed

close ant-design/ant-design#11574
react-component · Sep 8, 2018 · ffdd76e · ffdd76e
1 parent a2383c2
commit ffdd76e
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input-number",
-  "version": "4.0.12",
+  "version": "4.0.13",
   "description": "React input-number component",
   "keywords": [
     "react",

diff --git a/src/index.js b/src/index.js
@@ -120,6 +120,17 @@ export default class InputNumber extends React.Component {
         inputValue: this.inputting ? value : this.toPrecisionAsStep(value),
       });
     }
+
+    // Trigger onChange when max or min change
+    // https://github.com/ant-design/ant-design/issues/11574
+    const nextValue = 'value' in nextProps ? nextProps.value : this.state.value;
+    const { onChange, max, min } = this.props;
+    if ('max' in nextProps && nextProps.max !== max && nextValue > nextProps.max && onChange) {
+      onChange(nextProps.max);
+    }
+    if ('min' in nextProps && nextProps.min !== min && nextValue < nextProps.min && onChange) {
+      onChange(nextProps.min);
+    }
   }
 
   componentDidUpdate() {

diff --git a/tests/index.js b/tests/index.js
@@ -905,6 +905,50 @@ describe('inputNumber', () => {
       expect(onBlurCallCount).to.be(1);
       expect(ReactDOM.findDOMNode(inputNumber).className.indexOf('focused') > 0).to.be(false);
     });
+
+    // https://github.com/ant-design/ant-design/issues/11574
+    it('should trigger onChange when max or min change', () => {
+      const onChange = sinon.spy();
+      class Demo extends Component {
+        state = {
+          value: 10,
+          min: 0,
+          max: 20,
+        }
+        setMax(max) {
+          this.setState({ max });
+        }
+        setMin(min) {
+          this.setState({ min });
+        }
+        setValue(value) {
+          this.setState({ value });
+        }
+        render() {
+          return (
+            <InputNumber
+              ref="inputNum"
+              value={this.state.value}
+              onChange={onChange}
+              max={this.state.max}
+              min={this.state.min}
+            />
+          );
+        }
+      }
+      example = ReactDOM.render(<Demo />, container);
+      inputNumber = example.refs.inputNum;
+      inputElement = ReactDOM.findDOMNode(inputNumber.input);
+      example.setMin(11);
+      expect(inputElement.value).to.be('11');
+      expect(onChange.calledWith(11)).to.be(true);
+
+      example.setValue(15);
+
+      example.setMax(14);
+      expect(inputElement.value).to.be('14');
+      expect(onChange.calledWith(14)).to.be(true);
+    });
   });
 
   describe(`required prop`, () => {