onChange gets called when input content is deleted #27

Author: vlad-ignatov

__tests__/misc.test.jsx

@@ -44,7 +44,7 @@ describe ('NumericInput/misc', function() {
      *
      * @see https://github.com/vlad-ignatov/react-numeric-input/issues/19
      */
-    it ('onChange get called properly with `min`', done => {
+    it ('onChange gets called properly with `min`', done => {
         let log    = []
         let widget = TestUtils.renderIntoDocument(
             <NumericInput min={100} onChange={function(...args) { log.push(...args) }}/>
@@ -99,4 +99,25 @@ describe ('NumericInput/misc', function() {
             done()
         })
     }
+
+    /**
+     * onChange gets called when input content is deleted
+     * @see https://github.com/vlad-ignatov/react-numeric-input/issues/27
+     */
+    it ('onChange gets called when input content is deleted', done => {
+        let log    = []
+        let widget = TestUtils.renderIntoDocument(
+            <NumericInput min={100} value={1} onChange={(...args) => log.push(...args)}/>
+        )
+        let input = widget.refs.input
+
+        TestUtils.Simulate.focus(input)
+        input.value = 2
+        TestUtils.Simulate.change(input)
+        expect(log).toEqual([2,'2'])
+        input.value = ""
+        TestUtils.Simulate.change(input)
+        expect(log).toEqual([2,'2',null,""])
+        done()
+    })
 })

dist/react-numeric-input.js

@@ -229,7 +229,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            // Call the onChange if needed. This is placed here because there are
 	            // many reasons for changing the value and this is the common place
 	            // that can capture them all
-	            if (prevState.value !== this.state.value && !isNaN(this.state.value)) {
+	            if (prevState.value !== this.state.value && (!isNaN(this.state.value) || this.state.value === null)) {
 	                this._invokeEventCallback("onChange", this.state.value, this.refs.input.value);
 	            }
 
@@ -804,7 +804,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	                _extends(attrs.input, {
 	                    onChange: function onChange(e) {
-	                        _this5.setState({ value: _this5._parse(e.target.value) });
+	                        var val = _this5._parse(e.target.value);
+	                        if (isNaN(val)) {
+	                            val = null;
+	                        }
+	                        _this5.setState({ value: val });
 	                    },
 	                    onKeyDown: this._onKeyDown.bind(this),
 	                    onInput: function onInput() {

dist/react-numeric-input.min.js

@@ -134,7 +134,7 @@ module.exports =
 	    }, {
 	        key: "componentDidUpdate",
 	        value: function componentDidUpdate(prevProps, prevState) {
-	            if (prevState.value !== this.state.value && !isNaN(this.state.value)) {
+	            if (prevState.value !== this.state.value && (!isNaN(this.state.value) || this.state.value === null)) {
 	                this._invokeEventCallback("onChange", this.state.value, this.refs.input.value);
 	            }
 
@@ -568,7 +568,11 @@ module.exports =
 
 	                _extends(attrs.input, {
 	                    onChange: function onChange(e) {
-	                        _this5.setState({ value: _this5._parse(e.target.value) });
+	                        var val = _this5._parse(e.target.value);
+	                        if (isNaN(val)) {
+	                            val = null;
+	                        }
+	                        _this5.setState({ value: val });
 	                    },
 	                    onKeyDown: this._onKeyDown.bind(this),
 	                    onInput: function onInput() {

index.js

@@ -357,7 +357,7 @@ class NumericInput extends Component
         // Call the onChange if needed. This is placed here because there are
         // many reasons for changing the value and this is the common place
         // that can capture them all
-        if (prevState.value !== this.state.value && !isNaN(this.state.value)) {
+        if (prevState.value !== this.state.value && (!isNaN(this.state.value) || this.state.value === null)) {
             this._invokeEventCallback("onChange", this.state.value, this.refs.input.value)
         }
 
@@ -909,7 +909,11 @@ class NumericInput extends Component
 
             Object.assign(attrs.input, {
                 onChange : e => {
-                    this.setState({ value: this._parse(e.target.value) })
+                    let val = this._parse(e.target.value)
+                    if (isNaN(val)) {
+                        val = null
+                    }
+                    this.setState({ value: val })
                 },
                 onKeyDown: this._onKeyDown.bind(this),
                 onInput: (...args) => {