react-numeric-input - npm Package Compare versions

Comparing version 2.2.1 to 2.2.2

__tests__/focusAndBlur.test.jsx

@@ -29,3 +29,3 @@ /* global describe, it */
             // the onFocus callback receives it
-            TestUtils.Simulate.focus(widget.refs.input)
+            TestUtils.Simulate.focus(widget.refsInput)
 
@@ -37,5 +37,5 @@ setTimeout(() => {
                 // the focus back to the input and call the onFocus callback again
-                TestUtils.Simulate.blur(widget.refs.input)
+                TestUtils.Simulate.blur(widget.refsInput)
                 setTimeout(() => {
-                    TestUtils.Simulate.mouseDown(widget.refs.input.nextElementSibling)
+                    TestUtils.Simulate.mouseDown(widget.refsInput.nextElementSibling)
                     setTimeout(() => {
@@ -66,3 +66,3 @@ expect(onFocusCalls).toEqual(2)
         // Start by focusing the input
-        TestUtils.Simulate.focus(widget.refs.input)
+        TestUtils.Simulate.focus(widget.refsInput)
 
@@ -75,3 +75,3 @@ // Test again to see if after focus the input didn't blur somehow
             // the onBlur callback receives it
-            TestUtils.Simulate.blur(widget.refs.input)
+            TestUtils.Simulate.blur(widget.refsInput)
             setTimeout(() => {
@@ -82,7 +82,7 @@ expect(onBlurCalls).toEqual(1)
                 // input
-                TestUtils.Simulate.mouseDown(widget.refs.input.nextElementSibling)
+                TestUtils.Simulate.mouseDown(widget.refsInput.nextElementSibling)
                 setTimeout(() => {
 
                     // Now blur it again and see if it counts
-                    TestUtils.Simulate.blur(widget.refs.input)
+                    TestUtils.Simulate.blur(widget.refsInput)
                     setTimeout(() => {
@@ -110,3 +110,3 @@ expect(onBlurCalls).toEqual(2)
         setTimeout(() => {
-            if (document.activeElement === widget.refs.input) {
+            if (document.activeElement === widget.refsInput) {
                 expect(onFocusCalls).toEqual(1)
@@ -113,0 +113,0 @@ done()

__tests__/misc.test.jsx

@@ -24,3 +24,3 @@ /* global describe, it */
         let widget = TestUtils.renderIntoDocument(<NumericInput min={100}/>)
-        let input  = widget.refs.input
+        let input  = widget.refsInput
 
@@ -58,3 +58,3 @@ input.focus()
         )
-        let input  = widget.refs.input
+        let input  = widget.refsInput
 
@@ -84,5 +84,5 @@ TestUtils.Simulate.focus(input)
         widget.setState({ value: 1.25 })
-        expect(widget.refs.input.value).toEqual('1.25')
+        expect(widget.refsInput.value).toEqual('1.25')
         widget.setState({ value: 1.5 })
-        expect(widget.refs.input.value).toEqual('1.5')
+        expect(widget.refsInput.value).toEqual('1.5')
         done()
@@ -101,11 +101,11 @@ })
             )
-            expect(widget.refs.input.value).toEqual('10%')
-            TestUtils.Simulate.focus(widget.refs.input)
-            widget.refs.input.selectionStart = 1
-            widget.refs.input.selectionEnd = 1
+            expect(widget.refsInput.value).toEqual('10%')
+            TestUtils.Simulate.focus(widget.refsInput)
+            widget.refsInput.selectionStart = 1
+            widget.refsInput.selectionEnd = 1
             widget.saveSelection()
             widget.increase()
-            expect(widget.refs.input.value).toEqual('11%')
-            expect(widget.refs.input.selectionStart).toEqual(1)
-            expect(widget.refs.input.selectionEnd).toEqual(1)
+            expect(widget.refsInput.value).toEqual('11%')
+            expect(widget.refsInput.selectionStart).toEqual(1)
+            expect(widget.refsInput.selectionEnd).toEqual(1)
             done()
@@ -124,3 +124,3 @@ })
         )
-        let input = widget.refs.input
+        let input = widget.refsInput
 
@@ -143,3 +143,3 @@ TestUtils.Simulate.focus(input)
         let widget = TestUtils.renderIntoDocument(<NumericInput min={-10} max={10}/>)
-        let input  = widget.refs.input
+        let input  = widget.refsInput
 
@@ -183,3 +183,3 @@ input.focus();
             );
-            let input = widget.refs.input;
+            let input = widget.refsInput;
             TestUtils.Simulate.keyDown(input, { keyCode: key });
@@ -207,3 +207,3 @@ expect(input.value).toEqual(result);
         let parentComponent = TestUtils.renderIntoDocument(<ParentComponent/>);
-        let input = parentComponent.refs.numericInput.refs.input;
+        let input = parentComponent.refs.numericInput.refsInput;
         expect(input.value).toEqual("1");
@@ -221,3 +221,3 @@ expect(log).toEqual(0);
         );
-        let input = widget.refs.input;
+        let input = widget.refsInput;
         expect(input.value).toEqual("50");
@@ -235,3 +235,3 @@ done();
         );
-        let input = widget.refs.input;
+        let input = widget.refsInput;
         expect(log).toEqual(0);
@@ -259,3 +259,3 @@ expect(input.value).toEqual("50");
         );
-        let input = widget.refs.input;
+        let input = widget.refsInput;
         input.focus();
@@ -288,3 +288,3 @@ expect(input.value).toEqual('9.00');
         );
-        let input = widget.refs.input;
+        let input = widget.refsInput;
         input.focus();
@@ -308,3 +308,3 @@ expect(input.value).toEqual('0');
         );
-        let input = widget.refs.input;
+        let input = widget.refsInput;
         input.focus();
@@ -331,3 +331,3 @@ expect(input.value).toEqual('4');
         );
-        let input = widget.refs.input;
+        let input = widget.refsInput;
         input.focus();
@@ -334,0 +334,0 @@ expect(input.value).toEqual('1');

__tests__/NumericInput.test.jsx

@@ -18,4 +18,4 @@ /* global describe, it */
         var widget = TestUtils.renderIntoDocument(<NumericInput />);
-        expect(widget.refs.input.value).toEqual('');
-        expect(widget.refs.input.type).toEqual('text');
+        expect(widget.refsInput.value).toEqual('');
+        expect(widget.refsInput.type).toEqual('text');
     });
@@ -34,3 +34,3 @@
             ),
-            inputNode  = widget.refs.input;
+            inputNode  = widget.refsInput;
 
@@ -58,3 +58,3 @@ // Test the precision
         var widget = TestUtils.renderIntoDocument(<NumericInput value={0}/>),
-            inputNode = widget.refs.input;
+            inputNode = widget.refsInput;
         expect(inputNode.value).toEqual('0');
@@ -65,3 +65,3 @@ });
         var widget = TestUtils.renderIntoDocument(<NumericInput value="0"/>),
-            inputNode = widget.refs.input;
+            inputNode = widget.refsInput;
         expect(inputNode.value).toEqual('0');
@@ -72,3 +72,3 @@ });
         var widget = TestUtils.renderIntoDocument(<NumericInput value=""/>),
-            inputNode = widget.refs.input;
+            inputNode = widget.refsInput;
         expect(inputNode.value).toEqual('');
@@ -204,5 +204,5 @@ });
         var widget = TestUtils.renderIntoDocument(<NumericInput />);
-        expect(widget.refs.input.getValueAsNumber()).toEqual(0);
-        widget.refs.input.setValue(123.56);
-        expect(widget.refs.input.getValueAsNumber()).toEqual(123.56);
+        expect(widget.refsInput.getValueAsNumber()).toEqual(0);
+        widget.refsInput.setValue(123.56);
+        expect(widget.refsInput.getValueAsNumber()).toEqual(123.56);
     });
@@ -381,3 +381,3 @@
             btnUpNode  = widgetNode.firstChild.nextElementSibling,
-            inputNode  = widget.refs.input;
+            inputNode  = widget.refsInput;
 
@@ -403,3 +403,3 @@ expect(inputNode.value).toEqual('0x');
             ),
-            inputNode = widget.refs.input;
+            inputNode = widget.refsInput;
 
@@ -425,3 +425,3 @@ expect(hasFocus).toEqual(null);
         );
-        inputNode = widget.refs.input;
+        inputNode = widget.refsInput;
 
@@ -428,0 +428,0 @@ expect(hits).toEqual(0);

__tests__/onChange.test.jsx

@@ -26,4 +26,4 @@ /* global describe, it */
         // Press "5"
-        widget.refs.input.value = "5"
-        TestUtils.Simulate.change(widget.refs.input)
+        widget.refsInput.value = "5"
+        TestUtils.Simulate.change(widget.refsInput)
 
@@ -52,3 +52,3 @@ // Rendering must bring the focus to the input
         // Press "r"
-        TestUtils.Simulate.keyDown(widget.refs.input, { keyCode: 114 })
+        TestUtils.Simulate.keyDown(widget.refsInput, { keyCode: 114 })
 
@@ -75,3 +75,3 @@ setTimeout(() => {
 
-        TestUtils.Simulate.keyDown(widget.refs.input, { keyCode: KEYCODE_UP })
+        TestUtils.Simulate.keyDown(widget.refsInput, { keyCode: KEYCODE_UP })
 
@@ -98,3 +98,3 @@ setTimeout(() => {
 
-        TestUtils.Simulate.keyDown(widget.refs.input, {
+        TestUtils.Simulate.keyDown(widget.refsInput, {
             keyCode: KEYCODE_UP,
@@ -124,3 +124,3 @@ ctrlKey: true
 
-        TestUtils.Simulate.keyDown(widget.refs.input, {
+        TestUtils.Simulate.keyDown(widget.refsInput, {
             keyCode: KEYCODE_UP,
@@ -150,3 +150,3 @@ metaKey: true
 
-        TestUtils.Simulate.keyDown(widget.refs.input, {
+        TestUtils.Simulate.keyDown(widget.refsInput, {
             keyCode : KEYCODE_UP,
@@ -176,3 +176,3 @@ shiftKey: true
 
-        TestUtils.Simulate.keyDown(widget.refs.input, { keyCode: KEYCODE_DOWN })
+        TestUtils.Simulate.keyDown(widget.refsInput, { keyCode: KEYCODE_DOWN })
 
@@ -199,3 +199,3 @@ setTimeout(() => {
 
-        TestUtils.Simulate.keyDown(widget.refs.input, {
+        TestUtils.Simulate.keyDown(widget.refsInput, {
             keyCode: KEYCODE_DOWN,
@@ -225,3 +225,3 @@ ctrlKey: true
 
-        TestUtils.Simulate.keyDown(widget.refs.input, {
+        TestUtils.Simulate.keyDown(widget.refsInput, {
             keyCode: KEYCODE_DOWN,
@@ -251,3 +251,3 @@ metaKey: true
 
-        TestUtils.Simulate.keyDown(widget.refs.input, {
+        TestUtils.Simulate.keyDown(widget.refsInput, {
             keyCode : KEYCODE_DOWN,
@@ -278,3 +278,3 @@ shiftKey: true
         // Press "5"
-        TestUtils.Simulate.mouseDown(widget.refs.input.nextElementSibling)
+        TestUtils.Simulate.mouseDown(widget.refsInput.nextElementSibling)
 
@@ -303,3 +303,3 @@ // Rendering must bring the focus to the input
         // Press "5"
-        TestUtils.Simulate.mouseDown(widget.refs.input.nextElementSibling.nextElementSibling)
+        TestUtils.Simulate.mouseDown(widget.refsInput.nextElementSibling.nextElementSibling)
 
@@ -327,3 +327,3 @@ // Rendering must bring the focus to the input
 
-        TestUtils.Simulate.mouseDown(widget.refs.input.nextElementSibling)
+        TestUtils.Simulate.mouseDown(widget.refsInput.nextElementSibling)
 
@@ -350,3 +350,3 @@ setTimeout(() => {
 
-        TestUtils.Simulate.mouseDown(widget.refs.input.nextElementSibling.nextElementSibling)
+        TestUtils.Simulate.mouseDown(widget.refsInput.nextElementSibling.nextElementSibling)
 
@@ -353,0 +353,0 @@ setTimeout(() => {

__tests__/props.test.jsx

@@ -27,3 +27,3 @@ /* global React, describe, it */
 function testInputProp(cfg) {
-    cfg.getValue = cfg.getValue || (widget => widget.refs.input[cfg.propName])
+    cfg.getValue = cfg.getValue || (widget => widget.refsInput[cfg.propName])
     return testProp(cfg).then(() => {
@@ -34,3 +34,3 @@ let app = TestUtils.renderIntoDocument(<NumericInput />)
             return new Promise(resolve => {
-                expect(app.refs.input.outerHTML.search(
+                expect(app.refsInput.outerHTML.search(
                     new RegExp('\\bpattern="\\.\\*"')
@@ -41,3 +41,3 @@ )).toNotEqual(
                     attribute should be set to ".*". The outerHTML was
-                    ${app.refs.input.outerHTML}.`
+                    ${app.refsInput.outerHTML}.`
                 )
@@ -49,3 +49,3 @@ resolve()
             return new Promise(resolve => {
-                expect(app.refs.input.outerHTML.search(
+                expect(app.refsInput.outerHTML.search(
                     new RegExp("\\bvalue=\"\"", "i")
@@ -56,3 +56,3 @@ )).toNotEqual(
                     attribute should be set as "". The outerHTML was
-                    ${app.refs.input.outerHTML}.`
+                    ${app.refsInput.outerHTML}.`
                 )
@@ -63,3 +63,3 @@ resolve()
         return new Promise(resolve => {
-            expect(app.refs.input.outerHTML.search(
+            expect(app.refsInput.outerHTML.search(
                 new RegExp("\\b" + attrName + "=", "i")
@@ -70,3 +70,3 @@ )).toEqual(
                 attribute should not be set. The outerHTML was
-                ${app.refs.input.outerHTML}.`
+                ${app.refsInput.outerHTML}.`
             )
@@ -208,3 +208,3 @@ resolve()
                 // attrName: "value",
-                getValue : (widget) => widget.refs.input.value,
+                getValue : (widget) => widget.refsInput.value,
                 map: [
@@ -291,3 +291,3 @@ { in: ""       , out: ""    , otherProps: { strict: true  }},
 
-        walk(app.refs.wrapper, el => {
+        walk(app.refsWrapper, el => {
             expect(!el.getAttribute('style')).toEqual(true);
@@ -298,3 +298,3 @@ });
 
-        walk(app.refs.wrapper, el => {
+        walk(app.refsWrapper, el => {
             expect(!el.getAttribute('style')).toEqual(true);
@@ -301,0 +301,0 @@ });

__tests__/typing.test.jsx

@@ -35,3 +35,3 @@ /* global describe, it */
             let widget = TestUtils.renderIntoDocument(<NumericInput {...props}/>);
-            let input = widget.refs.input;
+            let input = widget.refsInput;
 
@@ -38,0 +38,0 @@ try {

__tests__/validation.test.jsx

@@ -46,3 +46,3 @@ /* global describe, it */
             expect(
-                widget.refs.wrapper.className.indexOf(INVALID_CLASS),
+                widget.refsWrapper.className.indexOf(INVALID_CLASS),
                 "Must not have the '" + INVALID_CLASS + "' class"
@@ -67,5 +67,5 @@ ).toEqual(-1)
         setTimeout(() => {
-            expect(widget.refs.input.required).toEqual(true, "Must be required")
-            expect(widget.refs.input.validity.valid).toEqual(false, "Must not be valid")
-            expect(widget.refs.input.value).toEqual("", "Must have empty value")
+            expect(widget.refsInput.required).toEqual(true, "Must be required")
+            expect(widget.refsInput.validity.valid).toEqual(false, "Must not be valid")
+            expect(widget.refsInput.value).toEqual("", "Must have empty value")
             expect(onInvalidCalled).toEqual(
@@ -76,3 +76,3 @@ true,
             expect(
-                widget.refs.wrapper.className.indexOf(INVALID_CLASS),
+                widget.refsWrapper.className.indexOf(INVALID_CLASS),
                 "Must have the '" + INVALID_CLASS + "' class"
@@ -96,4 +96,4 @@ ).toNotEqual(-1)
         setTimeout(() => {
-            expect(widget.refs.input.value).toEqual('1234')
-            expect(widget.refs.wrapper.className.indexOf(INVALID_CLASS)).toNotEqual(-1)
+            expect(widget.refsInput.value).toEqual('1234')
+            expect(widget.refsWrapper.className.indexOf(INVALID_CLASS)).toNotEqual(-1)
             expect(onInvalidCalled).toEqual(
@@ -119,3 +119,3 @@ true,
         setTimeout(() => {
-            expect(widget.refs.wrapper.className.indexOf(INVALID_CLASS)).toNotEqual(-1)
+            expect(widget.refsWrapper.className.indexOf(INVALID_CLASS)).toNotEqual(-1)
             expect(onInvalidCalled).toEqual(true)
@@ -138,3 +138,3 @@ done()
         setTimeout(() => {
-            expect(widget.refs.wrapper.className.indexOf(INVALID_CLASS)).toEqual(-1)
+            expect(widget.refsWrapper.className.indexOf(INVALID_CLASS)).toEqual(-1)
             expect(onInvalidCalled).toEqual(false)
@@ -158,8 +158,8 @@ done()
 
-        widget.refs.input.value = "abc"
-        widget.refs.input.setCustomValidity("This is a test")
-        TestUtils.Simulate.change(widget.refs.input)
+        widget.refsInput.value = "abc"
+        widget.refsInput.setCustomValidity("This is a test")
+        TestUtils.Simulate.change(widget.refsInput)
 
         setTimeout(() => {
-            expect(widget.refs.wrapper.className.indexOf(INVALID_CLASS)).toNotEqual(-1)
+            expect(widget.refsWrapper.className.indexOf(INVALID_CLASS)).toNotEqual(-1)
             expect(onInvalidCalled).toEqual(true)
@@ -178,15 +178,15 @@ expect(validationError).toEqual("This is a test")
         widget.setState({ value: 5 })
-        expect(widget.refs.NumericInput.refs.input.value).toEqual('5')
+        expect(widget.refs.NumericInput.refsInput.value).toEqual('5')
         expect(_called).toEqual(1, "Must not call the onValid callback after setting valid value")
 
         widget.setState({ maxLength: 5 })
-        expect(widget.refs.NumericInput.refs.input.maxLength).toEqual(5)
+        expect(widget.refs.NumericInput.refsInput.maxLength).toEqual(5)
         expect(_called).toEqual(1, "Must not call the onValid callback after setting big enough maxLength")
 
         widget.setState({ required: true })
-        expect(widget.refs.NumericInput.refs.input.required).toEqual(true)
+        expect(widget.refs.NumericInput.refsInput.required).toEqual(true)
         expect(_called).toEqual(1, "Must not call the onValid callback after setting required to true while the value is not empty")
 
         widget.setState({ value: 6 })
-        expect(widget.refs.NumericInput.refs.input.value).toEqual('6')
+        expect(widget.refs.NumericInput.refsInput.value).toEqual('6')
         expect(_called).toEqual(1, "Must not call the onValid callback after transition to another valid value")
@@ -193,0 +193,0 @@

CHANGELOG.md

@@ -0,1 +1,9 @@
+2.2.2
+--------------------------------------------------------------------------------
+* style={false} produces eslint warning so it is deprecated now. There is new `noStyle` boolean prop for that.
+* Fixes the case where string value reappears in input when mouse hovers over the up/down button after clicking away.
+* Document the `strict` prop.
+* A readOnly input is almost like disabled one now. The only difference is that you can copy the value.
+* Various small code improvements.
+
 2.2.1
@@ -7,2 +15,3 @@ --------------------------------------------------------------------------------
 * Added live demo preview (thanks to @ipiranhaa)
+* Accept React 16 as peer dependency
 
@@ -9,0 +18,0 @@ 2.2.0

dist/react-numeric-input.js

@@ -212,9 +212,9 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	            btnUpActive: false,
-	            inputFocus: false,
 	            // value         : null,
 	            stringValue: ""
 	        }, _this._propsToState(_this.props));
-
 	        _this.stop = _this.stop.bind(_this);
 	        _this.onTouchEnd = _this.onTouchEnd.bind(_this);
+	        _this.refsInput = {};
+	        _this.refsWrapper = {};
 	        return _this;
@@ -310,13 +310,13 @@ }
 	            ) {
-	                    this._invokeEventCallback("onChange", this.state.value, this.refs.input.value, this.refs.input);
+	                    this._invokeEventCallback("onChange", this.state.value, this.refsInput.value, this.refsInput);
 	                }
 
 	            // focus the input is needed (for example up/down buttons set
-	            // this.state.inputFocus to true)
-	            if (this.state.inputFocus) {
-	                this.refs.input.focus();
+	            // this._inputFocus to true)
+	            if (this._inputFocus) {
+	                this.refsInput.focus();
 
 	                // Restore selectionStart (if any)
 	                if (this.state.selectionStart || this.state.selectionStart === 0) {
-	                    this.refs.input.selectionStart = this.state.selectionStart;
+	                    this.refsInput.selectionStart = this.state.selectionStart;
 	                }
@@ -326,3 +326,3 @@
 	                if (this.state.selectionEnd || this.state.selectionEnd === 0) {
-	                    this.refs.input.selectionEnd = this.state.selectionEnd;
+	                    this.refsInput.selectionEnd = this.state.selectionEnd;
 	                }
@@ -355,7 +355,7 @@ }
 	            this._isMounted = true;
-	            this.refs.input.getValueAsNumber = function () {
+	            this.refsInput.getValueAsNumber = function () {
 	                return _this3.state.value || 0;
 	            };
 
-	            this.refs.input.setValue = function (value) {
+	            this.refsInput.setValue = function (value) {
 	                _this3.setState({
@@ -369,7 +369,7 @@ value: _this3._parse(value),
 	            // and the browser did focus it we have to pass that to the onFocus
-	            if (!this.state.inputFocus && IS_BROWSER && document.activeElement === this.refs.input) {
-	                this.state.inputFocus = true;
-	                this.refs.input.focus();
+	            if (!this._inputFocus && IS_BROWSER && document.activeElement === this.refsInput) {
+	                this._inputFocus = true;
+	                this.refsInput.focus();
 	                this._invokeEventCallback("onFocus", {
-	                    target: this.refs.input,
+	                    target: this.refsInput,
 	                    type: "focus"
@@ -390,4 +390,4 @@ });
 	        value: function saveSelection() {
-	            this.state.selectionStart = this.refs.input.selectionStart;
-	            this.state.selectionEnd = this.refs.input.selectionEnd;
+	            this.state.selectionStart = this.refsInput.selectionStart;
+	            this.state.selectionEnd = this.refsInput.selectionEnd;
 	        }
@@ -407,3 +407,3 @@
 
-	            var supportsValidation = !!this.refs.input.checkValidity;
+	            var supportsValidation = !!this.refsInput.checkValidity;
 
@@ -413,3 +413,3 @@ // noValidate
 
-	            this.refs.input.noValidate = noValidate;
+	            this.refsInput.noValidate = noValidate;
 
@@ -428,4 +428,4 @@ // If "noValidate" is set or "checkValidity" is not supported then
 	                // failures...
-	                if (this.refs.input.pattern === "") {
-	                    this.refs.input.pattern = this.props.required ? ".+" : ".*";
+	                if (this.refsInput.pattern === "") {
+	                    this.refsInput.pattern = this.props.required ? ".+" : ".*";
 	                }
@@ -435,7 +435,7 @@
 	                if (supportsValidation) {
-	                    this.refs.input.checkValidity();
-	                    valid = this.refs.input.validity.valid;
+	                    this.refsInput.checkValidity();
+	                    valid = this.refsInput.validity.valid;
 
 	                    if (!valid) {
-	                        validationError = this.refs.input.validationMessage;
+	                        validationError = this.refsInput.validationMessage;
 	                    }
@@ -446,3 +446,3 @@ }
 	                if (valid && supportsValidation && this.props.maxLength) {
-	                    if (this.refs.input.value.length > this.props.maxLength) {
+	                    if (this.refsInput.value.length > this.props.maxLength) {
 	                        validationError = "This value is too long";
@@ -453,3 +453,3 @@ }
 
-	            validationError = validationError || (valid ? "" : this.refs.input.validationMessage || "Unknown Error");
+	            validationError = validationError || (valid ? "" : this.refsInput.validationMessage || "Unknown Error");
 
@@ -459,10 +459,10 @@ var validStateChanged = this._valid !== validationError;
 	            if (validationError) {
-	                addClass(this.refs.wrapper, "has-error");
+	                addClass(this.refsWrapper, "has-error");
 	                if (validStateChanged) {
-	                    this._invokeEventCallback("onInvalid", validationError, this.state.value, this.refs.input.value);
+	                    this._invokeEventCallback("onInvalid", validationError, this.state.value, this.refsInput.value);
 	                }
 	            } else {
-	                removeClass(this.refs.wrapper, "has-error");
+	                removeClass(this.refsWrapper, "has-error");
 	                if (validStateChanged) {
-	                    this._invokeEventCallback("onValid", this.state.value, this.refs.input.value);
+	                    this._invokeEventCallback("onValid", this.state.value, this.refsInput.value);
 	                }
@@ -592,15 +592,15 @@ }
 	                } else {
-	                    var _value = this.refs.input.value,
+	                    var _value = this.refsInput.value,
 	                        length = _value.length;
 	                    if (e.keyCode === 8) {
 	                        // backspace
-	                        if (this.refs.input.selectionStart == this.refs.input.selectionEnd && this.refs.input.selectionEnd > 0 && _value.length && _value.charAt(this.refs.input.selectionEnd - 1) === ".") {
+	                        if (this.refsInput.selectionStart == this.refsInput.selectionEnd && this.refsInput.selectionEnd > 0 && _value.length && _value.charAt(this.refsInput.selectionEnd - 1) === ".") {
 	                            e.preventDefault();
-	                            this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd - 1;
+	                            this.refsInput.selectionStart = this.refsInput.selectionEnd = this.refsInput.selectionEnd - 1;
 	                        }
 	                    } else if (e.keyCode === 46) {
 	                        // delete
-	                        if (this.refs.input.selectionStart == this.refs.input.selectionEnd && this.refs.input.selectionEnd < length + 1 && _value.length && _value.charAt(this.refs.input.selectionEnd) === ".") {
+	                        if (this.refsInput.selectionStart == this.refsInput.selectionEnd && this.refsInput.selectionEnd < length + 1 && _value.length && _value.charAt(this.refsInput.selectionEnd) === ".") {
 	                            e.preventDefault();
-	                            this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd + 1;
+	                            this.refsInput.selectionStart = this.refsInput.selectionEnd = this.refsInput.selectionEnd + 1;
 	                        }
@@ -772,7 +772,8 @@ }
 	                strict = _props.strict,
-	                rest = _objectWithoutProperties(_props, ['step', 'min', 'max', 'precision', 'parse', 'format', 'mobile', 'snap', 'componentClass', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid', 'strict']);
+	                noStyle = _props.noStyle,
+	                rest = _objectWithoutProperties(_props, ['step', 'min', 'max', 'precision', 'parse', 'format', 'mobile', 'snap', 'componentClass', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid', 'strict', 'noStyle']);
 
+	            noStyle = noStyle || style === false;
+
 	            // Build the styles
-
-
 	            for (var x in NumericInput.style) {
@@ -795,5 +796,9 @@ css[x] = _extends({}, NumericInput.style[x], style ? style[x] || {} : {});
 	                wrap: {
-	                    style: style === false ? null : css.wrap,
+	                    style: noStyle ? null : css.wrap,
 	                    className: 'react-numeric-input',
-	                    ref: 'wrapper',
+	                    ref: function ref(e) {
+	                        if (e != null && e != undefined) {
+	                            _this6.refsWrapper = e;
+	                        }
+	                    },
 	                    onMouseUp: undefined,
@@ -803,5 +808,9 @@ onMouseLeave: undefined
 	                input: _extends({
-	                    ref: 'input',
+	                    ref: function ref(e) {
+	                        if (e != null && e != undefined) {
+	                            _this6.refsInput = e;
+	                        }
+	                    },
 	                    type: 'text',
-	                    style: style === false ? null : _extends({}, css.input, !hasFormControl ? css['input:not(.form-control)'] : {}, state.inputFocus ? css['input:focus'] : {})
+	                    style: noStyle ? null : _extends({}, css.input, !hasFormControl ? css['input:not(.form-control)'] : {}, this._inputFocus ? css['input:focus'] : {})
 	                }, rest),
@@ -815,3 +824,3 @@ btnUp: {
 	                    onTouchEnd: undefined,
-	                    style: style === false ? null : _extends({}, css.btn, css.btnUp, props.disabled ? css['btn:disabled'] : state.btnUpActive ? css['btn:active'] : state.btnUpHover ? css['btn:hover'] : {})
+	                    style: noStyle ? null : _extends({}, css.btn, css.btnUp, props.disabled || props.readOnly ? css['btn:disabled'] : state.btnUpActive ? css['btn:active'] : state.btnUpHover ? css['btn:hover'] : {})
 	                },
@@ -825,3 +834,3 @@ btnDown: {
 	                    onTouchEnd: undefined,
-	                    style: style === false ? null : _extends({}, css.btn, css.btnDown, props.disabled ? css['btn:disabled'] : state.btnDownActive ? css['btn:active'] : state.btnDownHover ? css['btn:hover'] : {})
+	                    style: noStyle ? null : _extends({}, css.btn, css.btnDown, props.disabled || props.readOnly ? css['btn:disabled'] : state.btnDownActive ? css['btn:active'] : state.btnDownHover ? css['btn:hover'] : {})
 	                }
@@ -840,4 +849,6 @@ };
 
+	            var loose = !this._isStrict && (this._inputFocus || !this._isMounted);
+
 	            // incomplete number
-	            if (RE_INCOMPLETE_NUMBER.test(stringValue)) {
+	            if (loose && RE_INCOMPLETE_NUMBER.test(stringValue)) {
 	                attrs.input.value = stringValue;
@@ -847,3 +858,3 @@ }
 	            // Not a number and not empty (loose mode only)
-	            else if (!this._isStrict && stringValue && !RE_NUMBER.test(stringValue)) {
+	            else if (loose && stringValue && !RE_NUMBER.test(stringValue)) {
 	                    attrs.input.value = stringValue;
@@ -874,3 +885,3 @@ }
 	            // Attach event listeners if the widget is not disabled
-	            if (!props.disabled) {
+	            if (!props.disabled && !props.readOnly) {
 	                _extends(attrs.wrap, {
@@ -909,6 +920,6 @@ onMouseUp: this.stop,
 	                        args[0].persist();
+	                        _this6._inputFocus = true;
 	                        _this6.setState({
 	                            btnUpHover: true,
-	                            btnUpActive: true,
-	                            inputFocus: true
+	                            btnUpActive: true
 	                        }, function () {
@@ -949,6 +960,6 @@ _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
 	                        args[0].persist();
+	                        _this6._inputFocus = true;
 	                        _this6.setState({
 	                            btnDownHover: true,
-	                            btnDownActive: true,
-	                            inputFocus: true
+	                            btnDownActive: true
 	                        }, function () {
@@ -996,10 +1007,9 @@ _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
 	                        args[0].persist();
-	                        _this6.setState({ inputFocus: true }, function () {
-	                            var val = _this6._parse(args[0].target.value);
-	                            _this6.setState({
-	                                value: val,
-	                                stringValue: val || val === 0 ? val + "" : ""
-	                            }, function () {
-	                                _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
-	                            });
+	                        _this6._inputFocus = true;
+	                        var val = _this6._parse(args[0].target.value);
+	                        _this6.setState({
+	                            value: val,
+	                            stringValue: val || val === 0 ? val + "" : ""
+	                        }, function () {
+	                            _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
 	                        });
@@ -1015,10 +1025,9 @@ },
 	                        args[0].persist();
-	                        _this6.setState({ inputFocus: false }, function () {
-	                            var val = _this6._parse(args[0].target.value);
-	                            _this6.setState({
-	                                value: val
-	                            }, function () {
-	                                _this6._invokeEventCallback.apply(_this6, ["onBlur"].concat(args));
-	                                _this6._isStrict = _isStrict;
-	                            });
+	                        _this6._inputFocus = false;
+	                        var val = _this6._parse(args[0].target.value);
+	                        _this6.setState({
+	                            value: val
+	                        }, function () {
+	                            _this6._invokeEventCallback.apply(_this6, ["onBlur"].concat(args));
+	                            _this6._isStrict = _isStrict;
 	                        });
@@ -1028,3 +1037,3 @@ }
 	            } else {
-	                if (style !== false) {
+	                if (!noStyle && props.disabled) {
 	                    _extends(attrs.input.style, css['input:disabled']);
@@ -1044,4 +1053,4 @@ }
 	                        attrs.btnUp,
-	                        _react2.default.createElement('i', { style: style === false ? null : css.minus }),
-	                        _react2.default.createElement('i', { style: style === false ? null : css.plus })
+	                        _react2.default.createElement('i', { style: noStyle ? null : css.minus }),
+	                        _react2.default.createElement('i', { style: noStyle ? null : css.plus })
 	                    ),
@@ -1051,3 +1060,3 @@ _react2.default.createElement(
 	                        attrs.btnDown,
-	                        _react2.default.createElement('i', { style: style === false ? null : css.minus })
+	                        _react2.default.createElement('i', { style: noStyle ? null : css.minus })
 	                    )
@@ -1064,3 +1073,3 @@ );
 	                    attrs.btnUp,
-	                    _react2.default.createElement('i', { style: style === false ? null : css.arrowUp })
+	                    _react2.default.createElement('i', { style: noStyle ? null : css.arrowUp })
 	                ),
@@ -1070,3 +1079,3 @@ _react2.default.createElement(
 	                    attrs.btnDown,
-	                    _react2.default.createElement('i', { style: style === false ? null : css.arrowDown })
+	                    _react2.default.createElement('i', { style: noStyle ? null : css.arrowDown })
 	                )
@@ -1095,2 +1104,3 @@ );
 	    style: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]),
+	    noStyle: _propTypes2.default.bool,
 	    type: _propTypes2.default.string,
@@ -1097,0 +1107,0 @@ pattern: _propTypes2.default.string,

dist/react-numeric-input.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React"),require("PropTypes")):"function"==typeof define&&define.amd?define(["React","PropTypes"],e):"object"==typeof exports?exports.NumericInput=e(require("React"),require("PropTypes")):t.NumericInput=e(t.React,t.PropTypes)}(this,function(t,e){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return t[o].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{default:t}}function i(t,e){var n={};for(var o in t)e.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o]);return n}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function u(t,e){return t.classList?t.classList.add(e):void(t.className.search(new RegExp("\\b"+e+"\\b"))||(t.className=" "+e))}function l(t,e){if(t.className){if(t.classList)return t.classList.remove(e);t.className=t.className.replace(new RegExp("\\b"+e+"\\b","g"),"")}}function p(t,e,n){var o=t[e];if("function"==typeof o){for(var i=arguments.length,a=Array(i>3?i-3:0),s=3;s<i;s++)a[s-3]=arguments[s];o=o.apply(void 0,a)}return void 0===o?n:o}var c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},f=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),d=n(1),h=o(d),v=n(2),b=o(v),y=38,m=40,g="undefined"!=typeof document,w=/^[+-]?((\.\d+)|(\d+(\.\d+)?))$/,x=/^([+-]|\.0*|[+-]\.0*|[+-]?\d+\.)?$/,E=function(t){function e(){var t;a(this,e);for(var n=arguments.length,o=Array(n),i=0;i<n;i++)o[i]=arguments[i];var r=s(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(o)));return r._isStrict=!!r.props.strict,r.state=c({btnDownHover:!1,btnDownActive:!1,btnUpHover:!1,btnUpActive:!1,inputFocus:!1,stringValue:""},r._propsToState(r.props)),r.stop=r.stop.bind(r),r.onTouchEnd=r.onTouchEnd.bind(r),r}return r(e,t),f(e,[{key:"_propsToState",value:function(t){var e={};return t.hasOwnProperty("value")?(e.stringValue=String(t.value||0===t.value?t.value:"").trim(),e.value=""!==e.stringValue?this._parse(t.value):null):!this._isMounted&&t.hasOwnProperty("defaultValue")&&(e.stringValue=String(t.defaultValue||0===t.defaultValue?t.defaultValue:"").trim(),e.value=""!==t.defaultValue?this._parse(t.defaultValue):null),e}},{key:"componentWillReceiveProps",value:function(t){var e=this;this._isStrict=!!t.strict;var n=this._propsToState(t);Object.keys(n).length&&(this._ignoreValueChange=!0,this.setState(n,function(){e._ignoreValueChange=!1}))}},{key:"componentWillUpdate",value:function(){this.saveSelection()}},{key:"componentDidUpdate",value:function(t,e){this._ignoreValueChange||e.value===this.state.value||isNaN(this.state.value)&&null!==this.state.value||this._invokeEventCallback("onChange",this.state.value,this.refs.input.value,this.refs.input),this.state.inputFocus&&(this.refs.input.focus(),(this.state.selectionStart||0===this.state.selectionStart)&&(this.refs.input.selectionStart=this.state.selectionStart),(this.state.selectionEnd||0===this.state.selectionEnd)&&(this.refs.input.selectionEnd=this.state.selectionEnd)),this.checkValidity()}},{key:"componentWillUnmount",value:function(){this._isMounted=!1,this.stop()}},{key:"componentDidMount",value:function(){var t=this;this._isMounted=!0,this.refs.input.getValueAsNumber=function(){return t.state.value||0},this.refs.input.setValue=function(e){t.setState({value:t._parse(e),stringValue:e})},!this.state.inputFocus&&g&&document.activeElement===this.refs.input&&(this.state.inputFocus=!0,this.refs.input.focus(),this._invokeEventCallback("onFocus",{target:this.refs.input,type:"focus"})),this.checkValidity()}},{key:"saveSelection",value:function(){this.state.selectionStart=this.refs.input.selectionStart,this.state.selectionEnd=this.refs.input.selectionEnd}},{key:"checkValidity",value:function(){var t=void 0,e="",n=!!this.refs.input.checkValidity,o=!(!this.props.noValidate||"false"==this.props.noValidate);this.refs.input.noValidate=o,t=o||!n,t?e="":(""===this.refs.input.pattern&&(this.refs.input.pattern=this.props.required?".+":".*"),n&&(this.refs.input.checkValidity(),t=this.refs.input.validity.valid,t||(e=this.refs.input.validationMessage)),t&&n&&this.props.maxLength&&this.refs.input.value.length>this.props.maxLength&&(e="This value is too long")),e=e||(t?"":this.refs.input.validationMessage||"Unknown Error");var i=this._valid!==e;this._valid=e,e?(u(this.refs.wrapper,"has-error"),i&&this._invokeEventCallback("onInvalid",e,this.state.value,this.refs.input.value)):(l(this.refs.wrapper,"has-error"),i&&this._invokeEventCallback("onValid",this.state.value,this.refs.input.value))}},{key:"_toNumber",value:function(t){var n=parseFloat(t);if(!isNaN(n)&&isFinite(n)||(n=0),this._isStrict){var o=p(this.props,"precision",null,this),i=Math.pow(10,null===o?10:o),a=+p(this.props,"min",e.defaultProps.min,this),s=+p(this.props,"max",e.defaultProps.max,this);n=Math.min(Math.max(n,a),s),n=Math.round(n*i)/i}return n}},{key:"_parse",value:function(t){return t=String(t),"function"==typeof this.props.parse?parseFloat(this.props.parse(t)):parseFloat(t)}},{key:"_format",value:function(t){var e=this._toNumber(t),n=p(this.props,"precision",null,this);return null!==n&&(e=t.toFixed(n)),e+="",this.props.format?this.props.format(e):e}},{key:"_step",value:function t(n,o){var i=this._isStrict;this._isStrict=!0;var t=+p(this.props,"step",e.defaultProps.step,this,n>0?e.DIRECTION_UP:e.DIRECTION_DOWN),a=this._toNumber((this.state.value||0)+t*n);return this.props.snap&&(a=Math.round(a/t)*t),this._isStrict=i,a!==this.state.value&&(this.setState({value:a,stringValue:a+""},o),!0)}},{key:"_onKeyDown",value:function(){for(var t=arguments.length,e=Array(t),n=0;n<t;n++)e[n]=arguments[n];e[0].persist(),this._invokeEventCallback.apply(this,["onKeyDown"].concat(e));var o=e[0];if(!o.isDefaultPrevented())if(o.keyCode===y)o.preventDefault(),this._step(o.ctrlKey||o.metaKey?.1:o.shiftKey?10:1);else if(o.keyCode===m)o.preventDefault(),this._step(o.ctrlKey||o.metaKey?-.1:o.shiftKey?-10:-1);else{var i=this.refs.input.value,a=i.length;8===o.keyCode?this.refs.input.selectionStart==this.refs.input.selectionEnd&&this.refs.input.selectionEnd>0&&i.length&&"."===i.charAt(this.refs.input.selectionEnd-1)&&(o.preventDefault(),this.refs.input.selectionStart=this.refs.input.selectionEnd=this.refs.input.selectionEnd-1):46===o.keyCode&&this.refs.input.selectionStart==this.refs.input.selectionEnd&&this.refs.input.selectionEnd<a+1&&i.length&&"."===i.charAt(this.refs.input.selectionEnd)&&(o.preventDefault(),this.refs.input.selectionStart=this.refs.input.selectionEnd=this.refs.input.selectionEnd+1)}}},{key:"stop",value:function(){this._timer&&clearTimeout(this._timer)}},{key:"increase",value:function(){var t=this,n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],o=arguments[1];this.stop(),this._step(1,o);var i=+p(this.props,"max",e.defaultProps.max,this);(isNaN(this.state.value)||+this.state.value<i)&&(this._timer=setTimeout(function(){t.increase(!0)},n?e.SPEED:e.DELAY))}},{key:"decrease",value:function(){var t=this,n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],o=arguments[1];this.stop(),this._step(-1,o);var i=+p(this.props,"min",e.defaultProps.min,this);(isNaN(this.state.value)||+this.state.value>i)&&(this._timer=setTimeout(function(){t.decrease(!0)},n?e.SPEED:e.DELAY))}},{key:"onMouseDown",value:function(t,e){"down"==t?this.decrease(!1,e):"up"==t&&this.increase(!1,e)}},{key:"onTouchStart",value:function(t,e){e.preventDefault(),"down"==t?this.decrease():"up"==t&&this.increase()}},{key:"onTouchEnd",value:function(t){t.preventDefault(),this.stop()}},{key:"_invokeEventCallback",value:function(t){if("function"==typeof this.props[t]){for(var e,n=arguments.length,o=Array(n>1?n-1:0),i=1;i<n;i++)o[i-1]=arguments[i];(e=this.props[t]).call.apply(e,[null].concat(o))}}},{key:"render",value:function(){var t=this,n=this.props,o=this.state,a={},s=this.props,r=(s.step,s.min,s.max,s.precision,s.parse,s.format,s.mobile),u=(s.snap,s.componentClass),l=(s.value,s.type,s.style),p=(s.defaultValue,s.onInvalid,s.onValid,s.strict,i(s,["step","min","max","precision","parse","format","mobile","snap","componentClass","value","type","style","defaultValue","onInvalid","onValid","strict"]));for(var f in e.style)a[f]=c({},e.style[f],l?l[f]||{}:{});var d=n.className&&/\bform-control\b/.test(n.className);"auto"==r&&(r=g&&"ontouchstart"in document),"function"==typeof r&&(r=r.call(this)),r=!!r;var v={wrap:{style:l===!1?null:a.wrap,className:"react-numeric-input",ref:"wrapper",onMouseUp:void 0,onMouseLeave:void 0},input:c({ref:"input",type:"text",style:l===!1?null:c({},a.input,d?{}:a["input:not(.form-control)"],o.inputFocus?a["input:focus"]:{})},p),btnUp:{onMouseEnter:void 0,onMouseDown:void 0,onMouseUp:void 0,onMouseLeave:void 0,onTouchStart:void 0,onTouchEnd:void 0,style:l===!1?null:c({},a.btn,a.btnUp,n.disabled?a["btn:disabled"]:o.btnUpActive?a["btn:active"]:o.btnUpHover?a["btn:hover"]:{})},btnDown:{onMouseEnter:void 0,onMouseDown:void 0,onMouseUp:void 0,onMouseLeave:void 0,onTouchStart:void 0,onTouchEnd:void 0,style:l===!1?null:c({},a.btn,a.btnDown,n.disabled?a["btn:disabled"]:o.btnDownActive?a["btn:active"]:o.btnDownHover?a["btn:hover"]:{})}},b=String(o.stringValue||(o.value||0===o.value?o.value:"")||"");x.test(b)?v.input.value=b:this._isStrict||!b||w.test(b)?o.value||0===o.value?v.input.value=this._format(o.value):v.input.value="":v.input.value=b,d&&l!==!1&&c(v.wrap.style,a["wrap.hasFormControl"]),r&&l!==!1&&(c(v.input.style,a["input.mobile"]),c(v.btnUp.style,a["btnUp.mobile"]),c(v.btnDown.style,a["btnDown.mobile"])),n.disabled?l!==!1&&c(v.input.style,a["input:disabled"]):(c(v.wrap,{onMouseUp:this.stop,onMouseLeave:this.stop}),c(v.btnUp,{onTouchStart:this.onTouchStart.bind(this,"up"),onTouchEnd:this.onTouchEnd,onMouseEnter:function(){t.setState({btnUpHover:!0})},onMouseLeave:function(){t.stop(),t.setState({btnUpHover:!1,btnUpActive:!1})},onMouseUp:function(){t.setState({btnUpHover:!0,btnUpActive:!1})},onMouseDown:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];n[0].preventDefault(),n[0].persist(),t.setState({btnUpHover:!0,btnUpActive:!0,inputFocus:!0},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n)),t.onMouseDown("up")})}}),c(v.btnDown,{onTouchStart:this.onTouchStart.bind(this,"down"),onTouchEnd:this.onTouchEnd,onMouseEnter:function(){t.setState({btnDownHover:!0})},onMouseLeave:function(){t.stop(),t.setState({btnDownHover:!1,btnDownActive:!1})},onMouseUp:function(){t.setState({btnDownHover:!0,btnDownActive:!1})},onMouseDown:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];n[0].preventDefault(),n[0].persist(),t.setState({btnDownHover:!0,btnDownActive:!0,inputFocus:!0},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n)),t.onMouseDown("down")})}}),c(v.input,{onChange:function(e){var n=e.target.value,o=t._parse(n);isNaN(o)&&(o=null),t.setState({value:t._isStrict?t._toNumber(o):o,stringValue:n})},onKeyDown:this._onKeyDown.bind(this),onInput:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];t.saveSelection(),t._invokeEventCallback.apply(t,["onInput"].concat(n))},onSelect:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];t.saveSelection(),t._invokeEventCallback.apply(t,["onSelect"].concat(n))},onFocus:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];n[0].persist(),t.setState({inputFocus:!0},function(){var e=t._parse(n[0].target.value);t.setState({value:e,stringValue:e||0===e?e+"":""},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n))})})},onBlur:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];var i=t._isStrict;t._isStrict=!0,n[0].persist(),t.setState({inputFocus:!1},function(){var e=t._parse(n[0].target.value);t.setState({value:e},function(){t._invokeEventCallback.apply(t,["onBlur"].concat(n)),t._isStrict=i})})}}));var y=u||"input";return r?h.default.createElement("span",v.wrap,h.default.createElement(y,v.input),h.default.createElement("b",v.btnUp,h.default.createElement("i",{style:l===!1?null:a.minus}),h.default.createElement("i",{style:l===!1?null:a.plus})),h.default.createElement("b",v.btnDown,h.default.createElement("i",{style:l===!1?null:a.minus}))):h.default.createElement("span",v.wrap,h.default.createElement(y,v.input),h.default.createElement("b",v.btnUp,h.default.createElement("i",{style:l===!1?null:a.arrowUp})),h.default.createElement("b",v.btnDown,h.default.createElement("i",{style:l===!1?null:a.arrowDown})))}}]),e}(d.Component);E.propTypes={step:b.default.oneOfType([b.default.number,b.default.func]),min:b.default.oneOfType([b.default.number,b.default.func]),max:b.default.oneOfType([b.default.number,b.default.func]),precision:b.default.oneOfType([b.default.number,b.default.func]),maxLength:b.default.number,parse:b.default.func,format:b.default.func,className:b.default.string,disabled:b.default.bool,readOnly:b.default.bool,required:b.default.bool,snap:b.default.bool,noValidate:b.default.oneOfType([b.default.bool,b.default.string]),style:b.default.oneOfType([b.default.object,b.default.bool]),type:b.default.string,pattern:b.default.string,onFocus:b.default.func,onBlur:b.default.func,onKeyDown:b.default.func,onChange:b.default.func,onInvalid:b.default.func,onValid:b.default.func,onInput:b.default.func,onSelect:b.default.func,size:b.default.oneOfType([b.default.number,b.default.string]),value:b.default.oneOfType([b.default.number,b.default.string]),defaultValue:b.default.oneOfType([b.default.number,b.default.string]),strict:b.default.bool,componentClass:b.default.string,mobile:function(t,e){var n=t[e];if(n!==!0&&n!==!1&&"auto"!==n&&"function"!=typeof n)return new Error('The "mobile" prop must be true, false, "auto" or a function')}},E.defaultProps={step:1,min:Number.MIN_SAFE_INTEGER||-9007199254740991,max:Number.MAX_SAFE_INTEGER||9007199254740991,precision:null,parse:null,format:null,mobile:"auto",strict:!1,componentClass:"input",style:{}},E.style={wrap:{position:"relative",display:"inline-block"},"wrap.hasFormControl":{display:"block"},arrowUp:{position:"absolute",top:"50%",left:"50%",width:0,height:0,borderWidth:"0 0.6ex 0.6ex 0.6ex",borderColor:"transparent transparent rgba(0, 0, 0, 0.7)",borderStyle:"solid",margin:"-0.3ex 0 0 -0.56ex"},arrowDown:{position:"absolute",top:"50%",left:"50%",width:0,height:0,borderWidth:"0.6ex 0.6ex 0 0.6ex",borderColor:"rgba(0, 0, 0, 0.7) transparent transparent",borderStyle:"solid",margin:"-0.3ex 0 0 -0.56ex"},plus:{position:"absolute",top:"50%",left:"50%",width:2,height:10,background:"rgba(0,0,0,.7)",margin:"-5px 0 0 -1px"},minus:{position:"absolute",top:"50%",left:"50%",width:10,height:2,background:"rgba(0,0,0,.7)",margin:"-1px 0 0 -5px"},btn:{position:"absolute",right:2,width:"2.26ex",borderColor:"rgba(0,0,0,.1)",borderStyle:"solid",textAlign:"center",cursor:"default",transition:"all 0.1s",background:"rgba(0,0,0,.1)",boxShadow:"-1px -1px 3px rgba(0,0,0,.1) inset,1px 1px 3px rgba(255,255,255,.7) inset"},btnUp:{top:2,bottom:"50%",borderRadius:"2px 2px 0 0",borderWidth:"1px 1px 0 1px"},"btnUp.mobile":{width:"3.3ex",bottom:2,boxShadow:"none",borderRadius:2,borderWidth:1},btnDown:{top:"50%",bottom:2,borderRadius:"0 0 2px 2px",borderWidth:"0 1px 1px 1px"},"btnDown.mobile":{width:"3.3ex",bottom:2,left:2,top:2,right:"auto",boxShadow:"none",borderRadius:2,borderWidth:1},"btn:hover":{background:"rgba(0,0,0,.2)"},"btn:active":{background:"rgba(0,0,0,.3)",boxShadow:"0 1px 3px rgba(0,0,0,.2) inset,-1px -1px 4px rgba(255,255,255,.5) inset"},"btn:disabled":{opacity:.5,boxShadow:"none",cursor:"not-allowed"},input:{paddingRight:"3ex",boxSizing:"border-box",fontSize:"inherit"},"input:not(.form-control)":{border:"1px solid #ccc",borderRadius:2,paddingLeft:4,display:"block",WebkitAppearance:"none",lineHeight:"normal"},"input.mobile":{paddingLeft:" 3.4ex",paddingRight:"3.4ex",textAlign:"center"},"input:focus":{},"input:disabled":{color:"rgba(0, 0, 0, 0.3)",textShadow:"0 1px 0 rgba(255, 255, 255, 0.8)"}},E.SPEED=50,E.DELAY=500,E.DIRECTION_UP="up",E.DIRECTION_DOWN="down",t.exports=E},function(e,n){e.exports=t},function(t,n){t.exports=e}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React"),require("PropTypes")):"function"==typeof define&&define.amd?define(["React","PropTypes"],e):"object"==typeof exports?exports.NumericInput=e(require("React"),require("PropTypes")):t.NumericInput=e(t.React,t.PropTypes)}(this,function(t,e){return function(t){function e(o){if(n[o])return n[o].exports;var a=n[o]={exports:{},id:o,loaded:!1};return t[o].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{default:t}}function a(t,e){var n={};for(var o in t)e.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o]);return n}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function u(t,e){return t.classList?t.classList.add(e):void(t.className.search(new RegExp("\\b"+e+"\\b"))||(t.className=" "+e))}function l(t,e){if(t.className){if(t.classList)return t.classList.remove(e);t.className=t.className.replace(new RegExp("\\b"+e+"\\b","g"),"")}}function p(t,e,n){var o=t[e];if("function"==typeof o){for(var a=arguments.length,i=Array(a>3?a-3:0),s=3;s<a;s++)i[s-3]=arguments[s];o=o.apply(void 0,i)}return void 0===o?n:o}var c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},f=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),d=n(1),h=o(d),v=n(2),b=o(v),y=38,m=40,g="undefined"!=typeof document,_=/^[+-]?((\.\d+)|(\d+(\.\d+)?))$/,w=/^([+-]|\.0*|[+-]\.0*|[+-]?\d+\.)?$/,x=function(t){function e(){var t;i(this,e);for(var n=arguments.length,o=Array(n),a=0;a<n;a++)o[a]=arguments[a];var r=s(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(o)));return r._isStrict=!!r.props.strict,r.state=c({btnDownHover:!1,btnDownActive:!1,btnUpHover:!1,btnUpActive:!1,stringValue:""},r._propsToState(r.props)),r.stop=r.stop.bind(r),r.onTouchEnd=r.onTouchEnd.bind(r),r.refsInput={},r.refsWrapper={},r}return r(e,t),f(e,[{key:"_propsToState",value:function(t){var e={};return t.hasOwnProperty("value")?(e.stringValue=String(t.value||0===t.value?t.value:"").trim(),e.value=""!==e.stringValue?this._parse(t.value):null):!this._isMounted&&t.hasOwnProperty("defaultValue")&&(e.stringValue=String(t.defaultValue||0===t.defaultValue?t.defaultValue:"").trim(),e.value=""!==t.defaultValue?this._parse(t.defaultValue):null),e}},{key:"componentWillReceiveProps",value:function(t){var e=this;this._isStrict=!!t.strict;var n=this._propsToState(t);Object.keys(n).length&&(this._ignoreValueChange=!0,this.setState(n,function(){e._ignoreValueChange=!1}))}},{key:"componentWillUpdate",value:function(){this.saveSelection()}},{key:"componentDidUpdate",value:function(t,e){this._ignoreValueChange||e.value===this.state.value||isNaN(this.state.value)&&null!==this.state.value||this._invokeEventCallback("onChange",this.state.value,this.refsInput.value,this.refsInput),this._inputFocus&&(this.refsInput.focus(),(this.state.selectionStart||0===this.state.selectionStart)&&(this.refsInput.selectionStart=this.state.selectionStart),(this.state.selectionEnd||0===this.state.selectionEnd)&&(this.refsInput.selectionEnd=this.state.selectionEnd)),this.checkValidity()}},{key:"componentWillUnmount",value:function(){this._isMounted=!1,this.stop()}},{key:"componentDidMount",value:function(){var t=this;this._isMounted=!0,this.refsInput.getValueAsNumber=function(){return t.state.value||0},this.refsInput.setValue=function(e){t.setState({value:t._parse(e),stringValue:e})},!this._inputFocus&&g&&document.activeElement===this.refsInput&&(this._inputFocus=!0,this.refsInput.focus(),this._invokeEventCallback("onFocus",{target:this.refsInput,type:"focus"})),this.checkValidity()}},{key:"saveSelection",value:function(){this.state.selectionStart=this.refsInput.selectionStart,this.state.selectionEnd=this.refsInput.selectionEnd}},{key:"checkValidity",value:function(){var t=void 0,e="",n=!!this.refsInput.checkValidity,o=!(!this.props.noValidate||"false"==this.props.noValidate);this.refsInput.noValidate=o,t=o||!n,t?e="":(""===this.refsInput.pattern&&(this.refsInput.pattern=this.props.required?".+":".*"),n&&(this.refsInput.checkValidity(),t=this.refsInput.validity.valid,t||(e=this.refsInput.validationMessage)),t&&n&&this.props.maxLength&&this.refsInput.value.length>this.props.maxLength&&(e="This value is too long")),e=e||(t?"":this.refsInput.validationMessage||"Unknown Error");var a=this._valid!==e;this._valid=e,e?(u(this.refsWrapper,"has-error"),a&&this._invokeEventCallback("onInvalid",e,this.state.value,this.refsInput.value)):(l(this.refsWrapper,"has-error"),a&&this._invokeEventCallback("onValid",this.state.value,this.refsInput.value))}},{key:"_toNumber",value:function(t){var n=parseFloat(t);if(!isNaN(n)&&isFinite(n)||(n=0),this._isStrict){var o=p(this.props,"precision",null,this),a=Math.pow(10,null===o?10:o),i=+p(this.props,"min",e.defaultProps.min,this),s=+p(this.props,"max",e.defaultProps.max,this);n=Math.min(Math.max(n,i),s),n=Math.round(n*a)/a}return n}},{key:"_parse",value:function(t){return t=String(t),"function"==typeof this.props.parse?parseFloat(this.props.parse(t)):parseFloat(t)}},{key:"_format",value:function(t){var e=this._toNumber(t),n=p(this.props,"precision",null,this);return null!==n&&(e=t.toFixed(n)),e+="",this.props.format?this.props.format(e):e}},{key:"_step",value:function t(n,o){var a=this._isStrict;this._isStrict=!0;var t=+p(this.props,"step",e.defaultProps.step,this,n>0?e.DIRECTION_UP:e.DIRECTION_DOWN),i=this._toNumber((this.state.value||0)+t*n);return this.props.snap&&(i=Math.round(i/t)*t),this._isStrict=a,i!==this.state.value&&(this.setState({value:i,stringValue:i+""},o),!0)}},{key:"_onKeyDown",value:function(){for(var t=arguments.length,e=Array(t),n=0;n<t;n++)e[n]=arguments[n];e[0].persist(),this._invokeEventCallback.apply(this,["onKeyDown"].concat(e));var o=e[0];if(!o.isDefaultPrevented())if(o.keyCode===y)o.preventDefault(),this._step(o.ctrlKey||o.metaKey?.1:o.shiftKey?10:1);else if(o.keyCode===m)o.preventDefault(),this._step(o.ctrlKey||o.metaKey?-.1:o.shiftKey?-10:-1);else{var a=this.refsInput.value,i=a.length;8===o.keyCode?this.refsInput.selectionStart==this.refsInput.selectionEnd&&this.refsInput.selectionEnd>0&&a.length&&"."===a.charAt(this.refsInput.selectionEnd-1)&&(o.preventDefault(),this.refsInput.selectionStart=this.refsInput.selectionEnd=this.refsInput.selectionEnd-1):46===o.keyCode&&this.refsInput.selectionStart==this.refsInput.selectionEnd&&this.refsInput.selectionEnd<i+1&&a.length&&"."===a.charAt(this.refsInput.selectionEnd)&&(o.preventDefault(),this.refsInput.selectionStart=this.refsInput.selectionEnd=this.refsInput.selectionEnd+1)}}},{key:"stop",value:function(){this._timer&&clearTimeout(this._timer)}},{key:"increase",value:function(){var t=this,n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],o=arguments[1];this.stop(),this._step(1,o);var a=+p(this.props,"max",e.defaultProps.max,this);(isNaN(this.state.value)||+this.state.value<a)&&(this._timer=setTimeout(function(){t.increase(!0)},n?e.SPEED:e.DELAY))}},{key:"decrease",value:function(){var t=this,n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],o=arguments[1];this.stop(),this._step(-1,o);var a=+p(this.props,"min",e.defaultProps.min,this);(isNaN(this.state.value)||+this.state.value>a)&&(this._timer=setTimeout(function(){t.decrease(!0)},n?e.SPEED:e.DELAY))}},{key:"onMouseDown",value:function(t,e){"down"==t?this.decrease(!1,e):"up"==t&&this.increase(!1,e)}},{key:"onTouchStart",value:function(t,e){e.preventDefault(),"down"==t?this.decrease():"up"==t&&this.increase()}},{key:"onTouchEnd",value:function(t){t.preventDefault(),this.stop()}},{key:"_invokeEventCallback",value:function(t){if("function"==typeof this.props[t]){for(var e,n=arguments.length,o=Array(n>1?n-1:0),a=1;a<n;a++)o[a-1]=arguments[a];(e=this.props[t]).call.apply(e,[null].concat(o))}}},{key:"render",value:function(){var t=this,n=this.props,o=this.state,i={},s=this.props,r=(s.step,s.min,s.max,s.precision,s.parse,s.format,s.mobile),u=(s.snap,s.componentClass),l=(s.value,s.type,s.style),p=(s.defaultValue,s.onInvalid,s.onValid,s.strict,s.noStyle),f=a(s,["step","min","max","precision","parse","format","mobile","snap","componentClass","value","type","style","defaultValue","onInvalid","onValid","strict","noStyle"]);p=p||l===!1;for(var d in e.style)i[d]=c({},e.style[d],l?l[d]||{}:{});var v=n.className&&/\bform-control\b/.test(n.className);"auto"==r&&(r=g&&"ontouchstart"in document),"function"==typeof r&&(r=r.call(this)),r=!!r;var b={wrap:{style:p?null:i.wrap,className:"react-numeric-input",ref:function(e){null!=e&&void 0!=e&&(t.refsWrapper=e)},onMouseUp:void 0,onMouseLeave:void 0},input:c({ref:function(e){null!=e&&void 0!=e&&(t.refsInput=e)},type:"text",style:p?null:c({},i.input,v?{}:i["input:not(.form-control)"],this._inputFocus?i["input:focus"]:{})},f),btnUp:{onMouseEnter:void 0,onMouseDown:void 0,onMouseUp:void 0,onMouseLeave:void 0,onTouchStart:void 0,onTouchEnd:void 0,style:p?null:c({},i.btn,i.btnUp,n.disabled||n.readOnly?i["btn:disabled"]:o.btnUpActive?i["btn:active"]:o.btnUpHover?i["btn:hover"]:{})},btnDown:{onMouseEnter:void 0,onMouseDown:void 0,onMouseUp:void 0,onMouseLeave:void 0,onTouchStart:void 0,onTouchEnd:void 0,style:p?null:c({},i.btn,i.btnDown,n.disabled||n.readOnly?i["btn:disabled"]:o.btnDownActive?i["btn:active"]:o.btnDownHover?i["btn:hover"]:{})}},y=String(o.stringValue||(o.value||0===o.value?o.value:"")||""),m=!this._isStrict&&(this._inputFocus||!this._isMounted);m&&w.test(y)?b.input.value=y:m&&y&&!_.test(y)?b.input.value=y:o.value||0===o.value?b.input.value=this._format(o.value):b.input.value="",v&&l!==!1&&c(b.wrap.style,i["wrap.hasFormControl"]),r&&l!==!1&&(c(b.input.style,i["input.mobile"]),c(b.btnUp.style,i["btnUp.mobile"]),c(b.btnDown.style,i["btnDown.mobile"])),n.disabled||n.readOnly?!p&&n.disabled&&c(b.input.style,i["input:disabled"]):(c(b.wrap,{onMouseUp:this.stop,onMouseLeave:this.stop}),c(b.btnUp,{onTouchStart:this.onTouchStart.bind(this,"up"),onTouchEnd:this.onTouchEnd,onMouseEnter:function(){t.setState({btnUpHover:!0})},onMouseLeave:function(){t.stop(),t.setState({btnUpHover:!1,btnUpActive:!1})},onMouseUp:function(){t.setState({btnUpHover:!0,btnUpActive:!1})},onMouseDown:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];n[0].preventDefault(),n[0].persist(),t._inputFocus=!0,t.setState({btnUpHover:!0,btnUpActive:!0},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n)),t.onMouseDown("up")})}}),c(b.btnDown,{onTouchStart:this.onTouchStart.bind(this,"down"),onTouchEnd:this.onTouchEnd,onMouseEnter:function(){t.setState({btnDownHover:!0})},onMouseLeave:function(){t.stop(),t.setState({btnDownHover:!1,btnDownActive:!1})},onMouseUp:function(){t.setState({btnDownHover:!0,btnDownActive:!1})},onMouseDown:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];n[0].preventDefault(),n[0].persist(),t._inputFocus=!0,t.setState({btnDownHover:!0,btnDownActive:!0},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n)),t.onMouseDown("down")})}}),c(b.input,{onChange:function(e){var n=e.target.value,o=t._parse(n);isNaN(o)&&(o=null),t.setState({value:t._isStrict?t._toNumber(o):o,stringValue:n})},onKeyDown:this._onKeyDown.bind(this),onInput:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];t.saveSelection(),t._invokeEventCallback.apply(t,["onInput"].concat(n))},onSelect:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];t.saveSelection(),t._invokeEventCallback.apply(t,["onSelect"].concat(n))},onFocus:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];n[0].persist(),t._inputFocus=!0;var a=t._parse(n[0].target.value);t.setState({value:a,stringValue:a||0===a?a+"":""},function(){t._invokeEventCallback.apply(t,["onFocus"].concat(n))})},onBlur:function(){for(var e=arguments.length,n=Array(e),o=0;o<e;o++)n[o]=arguments[o];var a=t._isStrict;t._isStrict=!0,n[0].persist(),t._inputFocus=!1;var i=t._parse(n[0].target.value);t.setState({value:i},function(){t._invokeEventCallback.apply(t,["onBlur"].concat(n)),t._isStrict=a})}}));var x=u||"input";return r?h.default.createElement("span",b.wrap,h.default.createElement(x,b.input),h.default.createElement("b",b.btnUp,h.default.createElement("i",{style:p?null:i.minus}),h.default.createElement("i",{style:p?null:i.plus})),h.default.createElement("b",b.btnDown,h.default.createElement("i",{style:p?null:i.minus}))):h.default.createElement("span",b.wrap,h.default.createElement(x,b.input),h.default.createElement("b",b.btnUp,h.default.createElement("i",{style:p?null:i.arrowUp})),h.default.createElement("b",b.btnDown,h.default.createElement("i",{style:p?null:i.arrowDown})))}}]),e}(d.Component);x.propTypes={step:b.default.oneOfType([b.default.number,b.default.func]),min:b.default.oneOfType([b.default.number,b.default.func]),max:b.default.oneOfType([b.default.number,b.default.func]),precision:b.default.oneOfType([b.default.number,b.default.func]),maxLength:b.default.number,parse:b.default.func,format:b.default.func,className:b.default.string,disabled:b.default.bool,readOnly:b.default.bool,required:b.default.bool,snap:b.default.bool,noValidate:b.default.oneOfType([b.default.bool,b.default.string]),style:b.default.oneOfType([b.default.object,b.default.bool]),noStyle:b.default.bool,type:b.default.string,pattern:b.default.string,onFocus:b.default.func,onBlur:b.default.func,onKeyDown:b.default.func,onChange:b.default.func,onInvalid:b.default.func,onValid:b.default.func,onInput:b.default.func,onSelect:b.default.func,size:b.default.oneOfType([b.default.number,b.default.string]),value:b.default.oneOfType([b.default.number,b.default.string]),defaultValue:b.default.oneOfType([b.default.number,b.default.string]),strict:b.default.bool,componentClass:b.default.string,mobile:function(t,e){var n=t[e];if(n!==!0&&n!==!1&&"auto"!==n&&"function"!=typeof n)return new Error('The "mobile" prop must be true, false, "auto" or a function')}},x.defaultProps={step:1,min:Number.MIN_SAFE_INTEGER||-9007199254740991,max:Number.MAX_SAFE_INTEGER||9007199254740991,precision:null,parse:null,format:null,mobile:"auto",strict:!1,componentClass:"input",style:{}},x.style={wrap:{position:"relative",display:"inline-block"},"wrap.hasFormControl":{display:"block"},arrowUp:{position:"absolute",top:"50%",left:"50%",width:0,height:0,borderWidth:"0 0.6ex 0.6ex 0.6ex",borderColor:"transparent transparent rgba(0, 0, 0, 0.7)",borderStyle:"solid",margin:"-0.3ex 0 0 -0.56ex"},arrowDown:{position:"absolute",top:"50%",left:"50%",width:0,height:0,borderWidth:"0.6ex 0.6ex 0 0.6ex",borderColor:"rgba(0, 0, 0, 0.7) transparent transparent",borderStyle:"solid",margin:"-0.3ex 0 0 -0.56ex"},plus:{position:"absolute",top:"50%",left:"50%",width:2,height:10,background:"rgba(0,0,0,.7)",margin:"-5px 0 0 -1px"},minus:{position:"absolute",top:"50%",left:"50%",width:10,height:2,background:"rgba(0,0,0,.7)",margin:"-1px 0 0 -5px"},btn:{position:"absolute",right:2,width:"2.26ex",borderColor:"rgba(0,0,0,.1)",borderStyle:"solid",textAlign:"center",cursor:"default",transition:"all 0.1s",background:"rgba(0,0,0,.1)",boxShadow:"-1px -1px 3px rgba(0,0,0,.1) inset,1px 1px 3px rgba(255,255,255,.7) inset"},btnUp:{top:2,bottom:"50%",borderRadius:"2px 2px 0 0",borderWidth:"1px 1px 0 1px"},"btnUp.mobile":{width:"3.3ex",bottom:2,boxShadow:"none",borderRadius:2,borderWidth:1},btnDown:{top:"50%",bottom:2,borderRadius:"0 0 2px 2px",borderWidth:"0 1px 1px 1px"},"btnDown.mobile":{width:"3.3ex",bottom:2,left:2,top:2,right:"auto",boxShadow:"none",borderRadius:2,borderWidth:1},"btn:hover":{background:"rgba(0,0,0,.2)"},"btn:active":{background:"rgba(0,0,0,.3)",boxShadow:"0 1px 3px rgba(0,0,0,.2) inset,-1px -1px 4px rgba(255,255,255,.5) inset"},"btn:disabled":{opacity:.5,boxShadow:"none",cursor:"not-allowed"},input:{paddingRight:"3ex",boxSizing:"border-box",fontSize:"inherit"},"input:not(.form-control)":{border:"1px solid #ccc",borderRadius:2,paddingLeft:4,display:"block",WebkitAppearance:"none",lineHeight:"normal"},"input.mobile":{paddingLeft:" 3.4ex",paddingRight:"3.4ex",textAlign:"center"},"input:focus":{},"input:disabled":{color:"rgba(0, 0, 0, 0.3)",textShadow:"0 1px 0 rgba(255, 255, 255, 0.8)"}},x.SPEED=50,x.DELAY=500,x.DIRECTION_UP="up",x.DIRECTION_DOWN="down",t.exports=x},function(e,n){e.exports=t},function(t,n){t.exports=e}])});

docs/react-numeric-input.js

@@ -212,9 +212,9 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	            btnUpActive: false,
-	            inputFocus: false,
 	            // value         : null,
 	            stringValue: ""
 	        }, _this._propsToState(_this.props));
-
 	        _this.stop = _this.stop.bind(_this);
 	        _this.onTouchEnd = _this.onTouchEnd.bind(_this);
+	        _this.refsInput = {};
+	        _this.refsWrapper = {};
 	        return _this;
@@ -310,13 +310,13 @@ }
 	            ) {
-	                    this._invokeEventCallback("onChange", this.state.value, this.refs.input.value, this.refs.input);
+	                    this._invokeEventCallback("onChange", this.state.value, this.refsInput.value, this.refsInput);
 	                }
 
 	            // focus the input is needed (for example up/down buttons set
-	            // this.state.inputFocus to true)
-	            if (this.state.inputFocus) {
-	                this.refs.input.focus();
+	            // this._inputFocus to true)
+	            if (this._inputFocus) {
+	                this.refsInput.focus();
 
 	                // Restore selectionStart (if any)
 	                if (this.state.selectionStart || this.state.selectionStart === 0) {
-	                    this.refs.input.selectionStart = this.state.selectionStart;
+	                    this.refsInput.selectionStart = this.state.selectionStart;
 	                }
@@ -326,3 +326,3 @@
 	                if (this.state.selectionEnd || this.state.selectionEnd === 0) {
-	                    this.refs.input.selectionEnd = this.state.selectionEnd;
+	                    this.refsInput.selectionEnd = this.state.selectionEnd;
 	                }
@@ -355,7 +355,7 @@ }
 	            this._isMounted = true;
-	            this.refs.input.getValueAsNumber = function () {
+	            this.refsInput.getValueAsNumber = function () {
 	                return _this3.state.value || 0;
 	            };
 
-	            this.refs.input.setValue = function (value) {
+	            this.refsInput.setValue = function (value) {
 	                _this3.setState({
@@ -369,7 +369,7 @@ value: _this3._parse(value),
 	            // and the browser did focus it we have to pass that to the onFocus
-	            if (!this.state.inputFocus && IS_BROWSER && document.activeElement === this.refs.input) {
-	                this.state.inputFocus = true;
-	                this.refs.input.focus();
+	            if (!this._inputFocus && IS_BROWSER && document.activeElement === this.refsInput) {
+	                this._inputFocus = true;
+	                this.refsInput.focus();
 	                this._invokeEventCallback("onFocus", {
-	                    target: this.refs.input,
+	                    target: this.refsInput,
 	                    type: "focus"
@@ -390,4 +390,4 @@ });
 	        value: function saveSelection() {
-	            this.state.selectionStart = this.refs.input.selectionStart;
-	            this.state.selectionEnd = this.refs.input.selectionEnd;
+	            this.state.selectionStart = this.refsInput.selectionStart;
+	            this.state.selectionEnd = this.refsInput.selectionEnd;
 	        }
@@ -407,3 +407,3 @@
 
-	            var supportsValidation = !!this.refs.input.checkValidity;
+	            var supportsValidation = !!this.refsInput.checkValidity;
 
@@ -413,3 +413,3 @@ // noValidate
 
-	            this.refs.input.noValidate = noValidate;
+	            this.refsInput.noValidate = noValidate;
 
@@ -428,4 +428,4 @@ // If "noValidate" is set or "checkValidity" is not supported then
 	                // failures...
-	                if (this.refs.input.pattern === "") {
-	                    this.refs.input.pattern = this.props.required ? ".+" : ".*";
+	                if (this.refsInput.pattern === "") {
+	                    this.refsInput.pattern = this.props.required ? ".+" : ".*";
 	                }
@@ -435,7 +435,7 @@
 	                if (supportsValidation) {
-	                    this.refs.input.checkValidity();
-	                    valid = this.refs.input.validity.valid;
+	                    this.refsInput.checkValidity();
+	                    valid = this.refsInput.validity.valid;
 
 	                    if (!valid) {
-	                        validationError = this.refs.input.validationMessage;
+	                        validationError = this.refsInput.validationMessage;
 	                    }
@@ -446,3 +446,3 @@ }
 	                if (valid && supportsValidation && this.props.maxLength) {
-	                    if (this.refs.input.value.length > this.props.maxLength) {
+	                    if (this.refsInput.value.length > this.props.maxLength) {
 	                        validationError = "This value is too long";
@@ -453,3 +453,3 @@ }
 
-	            validationError = validationError || (valid ? "" : this.refs.input.validationMessage || "Unknown Error");
+	            validationError = validationError || (valid ? "" : this.refsInput.validationMessage || "Unknown Error");
 
@@ -459,10 +459,10 @@ var validStateChanged = this._valid !== validationError;
 	            if (validationError) {
-	                addClass(this.refs.wrapper, "has-error");
+	                addClass(this.refsWrapper, "has-error");
 	                if (validStateChanged) {
-	                    this._invokeEventCallback("onInvalid", validationError, this.state.value, this.refs.input.value);
+	                    this._invokeEventCallback("onInvalid", validationError, this.state.value, this.refsInput.value);
 	                }
 	            } else {
-	                removeClass(this.refs.wrapper, "has-error");
+	                removeClass(this.refsWrapper, "has-error");
 	                if (validStateChanged) {
-	                    this._invokeEventCallback("onValid", this.state.value, this.refs.input.value);
+	                    this._invokeEventCallback("onValid", this.state.value, this.refsInput.value);
 	                }
@@ -592,15 +592,15 @@ }
 	                } else {
-	                    var _value = this.refs.input.value,
+	                    var _value = this.refsInput.value,
 	                        length = _value.length;
 	                    if (e.keyCode === 8) {
 	                        // backspace
-	                        if (this.refs.input.selectionStart == this.refs.input.selectionEnd && this.refs.input.selectionEnd > 0 && _value.length && _value.charAt(this.refs.input.selectionEnd - 1) === ".") {
+	                        if (this.refsInput.selectionStart == this.refsInput.selectionEnd && this.refsInput.selectionEnd > 0 && _value.length && _value.charAt(this.refsInput.selectionEnd - 1) === ".") {
 	                            e.preventDefault();
-	                            this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd - 1;
+	                            this.refsInput.selectionStart = this.refsInput.selectionEnd = this.refsInput.selectionEnd - 1;
 	                        }
 	                    } else if (e.keyCode === 46) {
 	                        // delete
-	                        if (this.refs.input.selectionStart == this.refs.input.selectionEnd && this.refs.input.selectionEnd < length + 1 && _value.length && _value.charAt(this.refs.input.selectionEnd) === ".") {
+	                        if (this.refsInput.selectionStart == this.refsInput.selectionEnd && this.refsInput.selectionEnd < length + 1 && _value.length && _value.charAt(this.refsInput.selectionEnd) === ".") {
 	                            e.preventDefault();
-	                            this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd + 1;
+	                            this.refsInput.selectionStart = this.refsInput.selectionEnd = this.refsInput.selectionEnd + 1;
 	                        }
@@ -772,7 +772,8 @@ }
 	                strict = _props.strict,
-	                rest = _objectWithoutProperties(_props, ['step', 'min', 'max', 'precision', 'parse', 'format', 'mobile', 'snap', 'componentClass', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid', 'strict']);
+	                noStyle = _props.noStyle,
+	                rest = _objectWithoutProperties(_props, ['step', 'min', 'max', 'precision', 'parse', 'format', 'mobile', 'snap', 'componentClass', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid', 'strict', 'noStyle']);
 
+	            noStyle = noStyle || style === false;
+
 	            // Build the styles
-
-
 	            for (var x in NumericInput.style) {
@@ -795,5 +796,9 @@ css[x] = _extends({}, NumericInput.style[x], style ? style[x] || {} : {});
 	                wrap: {
-	                    style: style === false ? null : css.wrap,
+	                    style: noStyle ? null : css.wrap,
 	                    className: 'react-numeric-input',
-	                    ref: 'wrapper',
+	                    ref: function ref(e) {
+	                        if (e != null && e != undefined) {
+	                            _this6.refsWrapper = e;
+	                        }
+	                    },
 	                    onMouseUp: undefined,
@@ -803,5 +808,9 @@ onMouseLeave: undefined
 	                input: _extends({
-	                    ref: 'input',
+	                    ref: function ref(e) {
+	                        if (e != null && e != undefined) {
+	                            _this6.refsInput = e;
+	                        }
+	                    },
 	                    type: 'text',
-	                    style: style === false ? null : _extends({}, css.input, !hasFormControl ? css['input:not(.form-control)'] : {}, state.inputFocus ? css['input:focus'] : {})
+	                    style: noStyle ? null : _extends({}, css.input, !hasFormControl ? css['input:not(.form-control)'] : {}, this._inputFocus ? css['input:focus'] : {})
 	                }, rest),
@@ -815,3 +824,3 @@ btnUp: {
 	                    onTouchEnd: undefined,
-	                    style: style === false ? null : _extends({}, css.btn, css.btnUp, props.disabled ? css['btn:disabled'] : state.btnUpActive ? css['btn:active'] : state.btnUpHover ? css['btn:hover'] : {})
+	                    style: noStyle ? null : _extends({}, css.btn, css.btnUp, props.disabled || props.readOnly ? css['btn:disabled'] : state.btnUpActive ? css['btn:active'] : state.btnUpHover ? css['btn:hover'] : {})
 	                },
@@ -825,3 +834,3 @@ btnDown: {
 	                    onTouchEnd: undefined,
-	                    style: style === false ? null : _extends({}, css.btn, css.btnDown, props.disabled ? css['btn:disabled'] : state.btnDownActive ? css['btn:active'] : state.btnDownHover ? css['btn:hover'] : {})
+	                    style: noStyle ? null : _extends({}, css.btn, css.btnDown, props.disabled || props.readOnly ? css['btn:disabled'] : state.btnDownActive ? css['btn:active'] : state.btnDownHover ? css['btn:hover'] : {})
 	                }
@@ -840,4 +849,6 @@ };
 
+	            var loose = !this._isStrict && (this._inputFocus || !this._isMounted);
+
 	            // incomplete number
-	            if (RE_INCOMPLETE_NUMBER.test(stringValue)) {
+	            if (loose && RE_INCOMPLETE_NUMBER.test(stringValue)) {
 	                attrs.input.value = stringValue;
@@ -847,3 +858,3 @@ }
 	            // Not a number and not empty (loose mode only)
-	            else if (!this._isStrict && stringValue && !RE_NUMBER.test(stringValue)) {
+	            else if (loose && stringValue && !RE_NUMBER.test(stringValue)) {
 	                    attrs.input.value = stringValue;
@@ -874,3 +885,3 @@ }
 	            // Attach event listeners if the widget is not disabled
-	            if (!props.disabled) {
+	            if (!props.disabled && !props.readOnly) {
 	                _extends(attrs.wrap, {
@@ -909,6 +920,6 @@ onMouseUp: this.stop,
 	                        args[0].persist();
+	                        _this6._inputFocus = true;
 	                        _this6.setState({
 	                            btnUpHover: true,
-	                            btnUpActive: true,
-	                            inputFocus: true
+	                            btnUpActive: true
 	                        }, function () {
@@ -949,6 +960,6 @@ _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
 	                        args[0].persist();
+	                        _this6._inputFocus = true;
 	                        _this6.setState({
 	                            btnDownHover: true,
-	                            btnDownActive: true,
-	                            inputFocus: true
+	                            btnDownActive: true
 	                        }, function () {
@@ -996,10 +1007,9 @@ _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
 	                        args[0].persist();
-	                        _this6.setState({ inputFocus: true }, function () {
-	                            var val = _this6._parse(args[0].target.value);
-	                            _this6.setState({
-	                                value: val,
-	                                stringValue: val || val === 0 ? val + "" : ""
-	                            }, function () {
-	                                _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
-	                            });
+	                        _this6._inputFocus = true;
+	                        var val = _this6._parse(args[0].target.value);
+	                        _this6.setState({
+	                            value: val,
+	                            stringValue: val || val === 0 ? val + "" : ""
+	                        }, function () {
+	                            _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
 	                        });
@@ -1015,10 +1025,9 @@ },
 	                        args[0].persist();
-	                        _this6.setState({ inputFocus: false }, function () {
-	                            var val = _this6._parse(args[0].target.value);
-	                            _this6.setState({
-	                                value: val
-	                            }, function () {
-	                                _this6._invokeEventCallback.apply(_this6, ["onBlur"].concat(args));
-	                                _this6._isStrict = _isStrict;
-	                            });
+	                        _this6._inputFocus = false;
+	                        var val = _this6._parse(args[0].target.value);
+	                        _this6.setState({
+	                            value: val
+	                        }, function () {
+	                            _this6._invokeEventCallback.apply(_this6, ["onBlur"].concat(args));
+	                            _this6._isStrict = _isStrict;
 	                        });
@@ -1028,3 +1037,3 @@ }
 	            } else {
-	                if (style !== false) {
+	                if (!noStyle && props.disabled) {
 	                    _extends(attrs.input.style, css['input:disabled']);
@@ -1044,4 +1053,4 @@ }
 	                        attrs.btnUp,
-	                        _react2.default.createElement('i', { style: style === false ? null : css.minus }),
-	                        _react2.default.createElement('i', { style: style === false ? null : css.plus })
+	                        _react2.default.createElement('i', { style: noStyle ? null : css.minus }),
+	                        _react2.default.createElement('i', { style: noStyle ? null : css.plus })
 	                    ),
@@ -1051,3 +1060,3 @@ _react2.default.createElement(
 	                        attrs.btnDown,
-	                        _react2.default.createElement('i', { style: style === false ? null : css.minus })
+	                        _react2.default.createElement('i', { style: noStyle ? null : css.minus })
 	                    )
@@ -1064,3 +1073,3 @@ );
 	                    attrs.btnUp,
-	                    _react2.default.createElement('i', { style: style === false ? null : css.arrowUp })
+	                    _react2.default.createElement('i', { style: noStyle ? null : css.arrowUp })
 	                ),
@@ -1070,3 +1079,3 @@ _react2.default.createElement(
 	                    attrs.btnDown,
-	                    _react2.default.createElement('i', { style: style === false ? null : css.arrowDown })
+	                    _react2.default.createElement('i', { style: noStyle ? null : css.arrowDown })
 	                )
@@ -1095,2 +1104,3 @@ );
 	    style: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]),
+	    noStyle: _propTypes2.default.bool,
 	    type: _propTypes2.default.string,
@@ -1097,0 +1107,0 @@ pattern: _propTypes2.default.string,

index.js

@@ -130,9 +130,9 @@ module.exports =
 	            btnUpActive: false,
-	            inputFocus: false,
 
 	            stringValue: ""
 	        }, _this._propsToState(_this.props));
-
 	        _this.stop = _this.stop.bind(_this);
 	        _this.onTouchEnd = _this.onTouchEnd.bind(_this);
+	        _this.refsInput = {};
+	        _this.refsWrapper = {};
 	        return _this;
@@ -181,14 +181,14 @@ }
 	            if (!this._ignoreValueChange && prevState.value !== this.state.value && (!isNaN(this.state.value) || this.state.value === null)) {
-	                    this._invokeEventCallback("onChange", this.state.value, this.refs.input.value, this.refs.input);
+	                    this._invokeEventCallback("onChange", this.state.value, this.refsInput.value, this.refsInput);
 	                }
 
-	            if (this.state.inputFocus) {
-	                this.refs.input.focus();
+	            if (this._inputFocus) {
+	                this.refsInput.focus();
 
 	                if (this.state.selectionStart || this.state.selectionStart === 0) {
-	                    this.refs.input.selectionStart = this.state.selectionStart;
+	                    this.refsInput.selectionStart = this.state.selectionStart;
 	                }
 
 	                if (this.state.selectionEnd || this.state.selectionEnd === 0) {
-	                    this.refs.input.selectionEnd = this.state.selectionEnd;
+	                    this.refsInput.selectionEnd = this.state.selectionEnd;
 	                }
@@ -211,7 +211,7 @@ }
 	            this._isMounted = true;
-	            this.refs.input.getValueAsNumber = function () {
+	            this.refsInput.getValueAsNumber = function () {
 	                return _this3.state.value || 0;
 	            };
 
-	            this.refs.input.setValue = function (value) {
+	            this.refsInput.setValue = function (value) {
 	                _this3.setState({
@@ -223,7 +223,7 @@ value: _this3._parse(value),
 
-	            if (!this.state.inputFocus && IS_BROWSER && document.activeElement === this.refs.input) {
-	                this.state.inputFocus = true;
-	                this.refs.input.focus();
+	            if (!this._inputFocus && IS_BROWSER && document.activeElement === this.refsInput) {
+	                this._inputFocus = true;
+	                this.refsInput.focus();
 	                this._invokeEventCallback("onFocus", {
-	                    target: this.refs.input,
+	                    target: this.refsInput,
 	                    type: "focus"
@@ -238,4 +238,4 @@ });
 	        value: function saveSelection() {
-	            this.state.selectionStart = this.refs.input.selectionStart;
-	            this.state.selectionEnd = this.refs.input.selectionEnd;
+	            this.state.selectionStart = this.refsInput.selectionStart;
+	            this.state.selectionEnd = this.refsInput.selectionEnd;
 	        }
@@ -248,7 +248,7 @@ }, {
 
-	            var supportsValidation = !!this.refs.input.checkValidity;
+	            var supportsValidation = !!this.refsInput.checkValidity;
 
 	            var noValidate = !!(this.props.noValidate && this.props.noValidate != "false");
 
-	            this.refs.input.noValidate = noValidate;
+	            this.refsInput.noValidate = noValidate;
 
@@ -260,12 +260,12 @@ valid = noValidate || !supportsValidation;
 	            } else {
-	                if (this.refs.input.pattern === "") {
-	                    this.refs.input.pattern = this.props.required ? ".+" : ".*";
+	                if (this.refsInput.pattern === "") {
+	                    this.refsInput.pattern = this.props.required ? ".+" : ".*";
 	                }
 
 	                if (supportsValidation) {
-	                    this.refs.input.checkValidity();
-	                    valid = this.refs.input.validity.valid;
+	                    this.refsInput.checkValidity();
+	                    valid = this.refsInput.validity.valid;
 
 	                    if (!valid) {
-	                        validationError = this.refs.input.validationMessage;
+	                        validationError = this.refsInput.validationMessage;
 	                    }
@@ -275,3 +275,3 @@ }
 	                if (valid && supportsValidation && this.props.maxLength) {
-	                    if (this.refs.input.value.length > this.props.maxLength) {
+	                    if (this.refsInput.value.length > this.props.maxLength) {
 	                        validationError = "This value is too long";
@@ -282,3 +282,3 @@ }
 
-	            validationError = validationError || (valid ? "" : this.refs.input.validationMessage || "Unknown Error");
+	            validationError = validationError || (valid ? "" : this.refsInput.validationMessage || "Unknown Error");
 
@@ -288,10 +288,10 @@ var validStateChanged = this._valid !== validationError;
 	            if (validationError) {
-	                addClass(this.refs.wrapper, "has-error");
+	                addClass(this.refsWrapper, "has-error");
 	                if (validStateChanged) {
-	                    this._invokeEventCallback("onInvalid", validationError, this.state.value, this.refs.input.value);
+	                    this._invokeEventCallback("onInvalid", validationError, this.state.value, this.refsInput.value);
 	                }
 	            } else {
-	                removeClass(this.refs.wrapper, "has-error");
+	                removeClass(this.refsWrapper, "has-error");
 	                if (validStateChanged) {
-	                    this._invokeEventCallback("onValid", this.state.value, this.refs.input.value);
+	                    this._invokeEventCallback("onValid", this.state.value, this.refsInput.value);
 	                }
@@ -386,13 +386,13 @@ }
 	                } else {
-	                    var _value = this.refs.input.value,
+	                    var _value = this.refsInput.value,
 	                        length = _value.length;
 	                    if (e.keyCode === 8) {
-	                        if (this.refs.input.selectionStart == this.refs.input.selectionEnd && this.refs.input.selectionEnd > 0 && _value.length && _value.charAt(this.refs.input.selectionEnd - 1) === ".") {
+	                        if (this.refsInput.selectionStart == this.refsInput.selectionEnd && this.refsInput.selectionEnd > 0 && _value.length && _value.charAt(this.refsInput.selectionEnd - 1) === ".") {
 	                            e.preventDefault();
-	                            this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd - 1;
+	                            this.refsInput.selectionStart = this.refsInput.selectionEnd = this.refsInput.selectionEnd - 1;
 	                        }
 	                    } else if (e.keyCode === 46) {
-	                        if (this.refs.input.selectionStart == this.refs.input.selectionEnd && this.refs.input.selectionEnd < length + 1 && _value.length && _value.charAt(this.refs.input.selectionEnd) === ".") {
+	                        if (this.refsInput.selectionStart == this.refsInput.selectionEnd && this.refsInput.selectionEnd < length + 1 && _value.length && _value.charAt(this.refsInput.selectionEnd) === ".") {
 	                            e.preventDefault();
-	                            this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd + 1;
+	                            this.refsInput.selectionStart = this.refsInput.selectionEnd = this.refsInput.selectionEnd + 1;
 	                        }
@@ -510,4 +510,7 @@ }
 	                strict = _props.strict,
-	                rest = _objectWithoutProperties(_props, ['step', 'min', 'max', 'precision', 'parse', 'format', 'mobile', 'snap', 'componentClass', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid', 'strict']);
+	                noStyle = _props.noStyle,
+	                rest = _objectWithoutProperties(_props, ['step', 'min', 'max', 'precision', 'parse', 'format', 'mobile', 'snap', 'componentClass', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid', 'strict', 'noStyle']);
 
+	            noStyle = noStyle || style === false;
+
 	            for (var x in NumericInput.style) {
@@ -530,5 +533,9 @@ css[x] = _extends({}, NumericInput.style[x], style ? style[x] || {} : {});
 	                wrap: {
-	                    style: style === false ? null : css.wrap,
+	                    style: noStyle ? null : css.wrap,
 	                    className: 'react-numeric-input',
-	                    ref: 'wrapper',
+	                    ref: function ref(e) {
+	                        if (e != null && e != undefined) {
+	                            _this6.refsWrapper = e;
+	                        }
+	                    },
 	                    onMouseUp: undefined,
@@ -538,5 +545,9 @@ onMouseLeave: undefined
 	                input: _extends({
-	                    ref: 'input',
+	                    ref: function ref(e) {
+	                        if (e != null && e != undefined) {
+	                            _this6.refsInput = e;
+	                        }
+	                    },
 	                    type: 'text',
-	                    style: style === false ? null : _extends({}, css.input, !hasFormControl ? css['input:not(.form-control)'] : {}, state.inputFocus ? css['input:focus'] : {})
+	                    style: noStyle ? null : _extends({}, css.input, !hasFormControl ? css['input:not(.form-control)'] : {}, this._inputFocus ? css['input:focus'] : {})
 	                }, rest),
@@ -550,3 +561,3 @@ btnUp: {
 	                    onTouchEnd: undefined,
-	                    style: style === false ? null : _extends({}, css.btn, css.btnUp, props.disabled ? css['btn:disabled'] : state.btnUpActive ? css['btn:active'] : state.btnUpHover ? css['btn:hover'] : {})
+	                    style: noStyle ? null : _extends({}, css.btn, css.btnUp, props.disabled || props.readOnly ? css['btn:disabled'] : state.btnUpActive ? css['btn:active'] : state.btnUpHover ? css['btn:hover'] : {})
 	                },
@@ -560,3 +571,3 @@ btnDown: {
 	                    onTouchEnd: undefined,
-	                    style: style === false ? null : _extends({}, css.btn, css.btnDown, props.disabled ? css['btn:disabled'] : state.btnDownActive ? css['btn:active'] : state.btnDownHover ? css['btn:hover'] : {})
+	                    style: noStyle ? null : _extends({}, css.btn, css.btnDown, props.disabled || props.readOnly ? css['btn:disabled'] : state.btnDownActive ? css['btn:active'] : state.btnDownHover ? css['btn:hover'] : {})
 	                }
@@ -567,5 +578,7 @@ };
 
-	            if (RE_INCOMPLETE_NUMBER.test(stringValue)) {
+	            var loose = !this._isStrict && (this._inputFocus || !this._isMounted);
+
+	            if (loose && RE_INCOMPLETE_NUMBER.test(stringValue)) {
 	                attrs.input.value = stringValue;
-	            } else if (!this._isStrict && stringValue && !RE_NUMBER.test(stringValue)) {
+	            } else if (loose && stringValue && !RE_NUMBER.test(stringValue)) {
 	                    attrs.input.value = stringValue;
@@ -588,3 +601,3 @@ } else if (state.value || state.value === 0) {
 
-	            if (!props.disabled) {
+	            if (!props.disabled && !props.readOnly) {
 	                _extends(attrs.wrap, {
@@ -623,6 +636,6 @@ onMouseUp: this.stop,
 	                        args[0].persist();
+	                        _this6._inputFocus = true;
 	                        _this6.setState({
 	                            btnUpHover: true,
-	                            btnUpActive: true,
-	                            inputFocus: true
+	                            btnUpActive: true
 	                        }, function () {
@@ -663,6 +676,6 @@ _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
 	                        args[0].persist();
+	                        _this6._inputFocus = true;
 	                        _this6.setState({
 	                            btnDownHover: true,
-	                            btnDownActive: true,
-	                            inputFocus: true
+	                            btnDownActive: true
 	                        }, function () {
@@ -710,10 +723,9 @@ _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
 	                        args[0].persist();
-	                        _this6.setState({ inputFocus: true }, function () {
-	                            var val = _this6._parse(args[0].target.value);
-	                            _this6.setState({
-	                                value: val,
-	                                stringValue: val || val === 0 ? val + "" : ""
-	                            }, function () {
-	                                _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
-	                            });
+	                        _this6._inputFocus = true;
+	                        var val = _this6._parse(args[0].target.value);
+	                        _this6.setState({
+	                            value: val,
+	                            stringValue: val || val === 0 ? val + "" : ""
+	                        }, function () {
+	                            _this6._invokeEventCallback.apply(_this6, ["onFocus"].concat(args));
 	                        });
@@ -729,10 +741,9 @@ },
 	                        args[0].persist();
-	                        _this6.setState({ inputFocus: false }, function () {
-	                            var val = _this6._parse(args[0].target.value);
-	                            _this6.setState({
-	                                value: val
-	                            }, function () {
-	                                _this6._invokeEventCallback.apply(_this6, ["onBlur"].concat(args));
-	                                _this6._isStrict = _isStrict;
-	                            });
+	                        _this6._inputFocus = false;
+	                        var val = _this6._parse(args[0].target.value);
+	                        _this6.setState({
+	                            value: val
+	                        }, function () {
+	                            _this6._invokeEventCallback.apply(_this6, ["onBlur"].concat(args));
+	                            _this6._isStrict = _isStrict;
 	                        });
@@ -742,3 +753,3 @@ }
 	            } else {
-	                if (style !== false) {
+	                if (!noStyle && props.disabled) {
 	                    _extends(attrs.input.style, css['input:disabled']);
@@ -758,4 +769,4 @@ }
 	                        attrs.btnUp,
-	                        _react2.default.createElement('i', { style: style === false ? null : css.minus }),
-	                        _react2.default.createElement('i', { style: style === false ? null : css.plus })
+	                        _react2.default.createElement('i', { style: noStyle ? null : css.minus }),
+	                        _react2.default.createElement('i', { style: noStyle ? null : css.plus })
 	                    ),
@@ -765,3 +776,3 @@ _react2.default.createElement(
 	                        attrs.btnDown,
-	                        _react2.default.createElement('i', { style: style === false ? null : css.minus })
+	                        _react2.default.createElement('i', { style: noStyle ? null : css.minus })
 	                    )
@@ -778,3 +789,3 @@ );
 	                    attrs.btnUp,
-	                    _react2.default.createElement('i', { style: style === false ? null : css.arrowUp })
+	                    _react2.default.createElement('i', { style: noStyle ? null : css.arrowUp })
 	                ),
@@ -784,3 +795,3 @@ _react2.default.createElement(
 	                    attrs.btnDown,
-	                    _react2.default.createElement('i', { style: style === false ? null : css.arrowDown })
+	                    _react2.default.createElement('i', { style: noStyle ? null : css.arrowDown })
 	                )
@@ -809,2 +820,3 @@ );
 	    style: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]),
+	    noStyle: _propTypes2.default.bool,
 	    type: _propTypes2.default.string,
@@ -811,0 +823,0 @@ pattern: _propTypes2.default.string,

package.json

 {
   "name": "react-numeric-input",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Number input component that can replace the native number input which is not yet very well supported and where it is, it does not have the same appearance across the browsers. Additionally this component offers more flexible options and can be used for any values (differently formatted representations of the internal numeric value).",
@@ -8,5 +8,5 @@ "main": "index.js",
     "build-examples": "npm run build-dist && webpack --config ./build_config/examples.js && cp dist/react-numeric-input.js docs/react-numeric-input.js",
-    "build-dist"    : "webpack --config ./build_config/dist.js",
+    "build-dist": "webpack --config ./build_config/dist.js",
     "build-dist-min": "webpack --config ./build_config/dist-min.js",
-    "build"         : "webpack --config ./build_config/main.js",
+    "build": "webpack --config ./build_config/main.js",
     "build-all": "npm run build && npm run build-dist-min && npm run build-examples",
@@ -48,3 +48,3 @@ "test": "karma start",
     "expect": "^1.12.2",
-    "karma": "^0.13.14",
+    "karma": "^0.13.22",
     "karma-chrome-launcher": "^0.2.1",
@@ -68,4 +68,4 @@ "karma-firefox-launcher": "^0.1.6",
   "peerDependencies": {
-    "react": ">=0.14.0 || ^15.6.1 || >= 16.0.0"
+    "react": ">=0.14.0 || ^15.6.1 || ^16.0.0"
   }
 }

README.md

@@ -59,2 +59,8 @@ # <img align="right" src="http://vlad-ignatov.github.io/react-numeric-input/examples/v2.0.0/screenshot.png" width="123"/>React Numeric Input
 
+#### Strict vs Loose Mode
+You can type any value in the input as long as it is in focus. On blur, or when
+you attempt to increment/decrement it, the value will be converted to number.
+If you don't want this behaviour, pass `strict` in the props and any value that
+cannot be converted to number will be rejected immediately.
+
 #### Custom format
@@ -100,2 +106,3 @@ By default the component displays the value number as is. However, you can
 **componentClass**|`string`                             |`input`
+**strict**        |`boolean`                            |`false`
 
@@ -102,0 +109,0 @@ Any other option is passed directly the input created by the component. Just

src/NumericInput.jsx

@@ -71,3 +71,2 @@ // @flow
     btnUpActive   ?: boolean;
-    inputFocus    ?: boolean;
     value         ?: number | null;
@@ -95,2 +94,3 @@ stringValue   ?: string;
         style        : PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+        noStyle      : PropTypes.bool,
         type         : PropTypes.string,
@@ -337,3 +337,6 @@ pattern      : PropTypes.string,
     _isMounted: boolean;
+    _inputFocus: boolean;
     onTouchEnd: Function;
+    refsWrapper: Object;
+    refsInput: Object;
 
@@ -362,4 +365,2 @@ /**
         this.state = {
-            // selectionStart: null,
-            // selectionEnd  : null,
             btnDownHover  : false,
@@ -369,10 +370,9 @@ btnDownActive : false,
             btnUpActive   : false,
-            inputFocus    : false,
-            // value         : null,
             stringValue   : "",
             ...this._propsToState(this.props)
         };
-
         this.stop = this.stop.bind(this);
         this.onTouchEnd = this.onTouchEnd.bind(this);
+        this.refsInput = {};
+        this.refsWrapper = {};
     }
@@ -449,13 +449,13 @@
         ) {
-            this._invokeEventCallback("onChange", this.state.value, this.refs.input.value, this.refs.input)
+            this._invokeEventCallback("onChange", this.state.value, this.refsInput.value, this.refsInput)
         }
 
         // focus the input is needed (for example up/down buttons set
-        // this.state.inputFocus to true)
-        if (this.state.inputFocus) {
-            this.refs.input.focus()
+        // this._inputFocus to true)
+        if (this._inputFocus) {
+            this.refsInput.focus()
 
             // Restore selectionStart (if any)
             if (this.state.selectionStart || this.state.selectionStart === 0) {
-                this.refs.input.selectionStart = this.state.selectionStart
+                this.refsInput.selectionStart = this.state.selectionStart
             }
@@ -465,3 +465,3 @@
             if (this.state.selectionEnd || this.state.selectionEnd === 0) {
-                this.refs.input.selectionEnd = this.state.selectionEnd
+                this.refsInput.selectionEnd = this.state.selectionEnd
             }
@@ -488,5 +488,5 @@ }
         this._isMounted = true
-        this.refs.input.getValueAsNumber = () => this.state.value || 0
+        this.refsInput.getValueAsNumber = () => this.state.value || 0
 
-        this.refs.input.setValue = (value) => {
+        this.refsInput.setValue = (value) => {
             this.setState({
@@ -500,7 +500,7 @@ value: this._parse(value),
         // and the browser did focus it we have to pass that to the onFocus
-        if (!this.state.inputFocus && IS_BROWSER && document.activeElement === this.refs.input) {
-            this.state.inputFocus = true
-            this.refs.input.focus()
+        if (!this._inputFocus && IS_BROWSER && document.activeElement === this.refsInput) {
+            this._inputFocus = true
+            this.refsInput.focus()
             this._invokeEventCallback("onFocus", {
-                target: this.refs.input,
+                target: this.refsInput,
                 type  : "focus"
@@ -519,4 +519,4 @@ })
     {
-        this.state.selectionStart = this.refs.input.selectionStart
-        this.state.selectionEnd   = this.refs.input.selectionEnd
+        this.state.selectionStart = this.refsInput.selectionStart
+        this.state.selectionEnd   = this.refsInput.selectionEnd
     }
@@ -533,3 +533,3 @@
 
-        let supportsValidation = !!this.refs.input.checkValidity
+        let supportsValidation = !!this.refsInput.checkValidity
 
@@ -541,3 +541,3 @@ // noValidate
 
-        this.refs.input.noValidate = noValidate
+        this.refsInput.noValidate = noValidate
 
@@ -557,4 +557,4 @@ // If "noValidate" is set or "checkValidity" is not supported then
             // failures...
-            if (this.refs.input.pattern === "") {
-                this.refs.input.pattern = this.props.required ? ".+" : ".*"
+            if (this.refsInput.pattern === "") {
+                this.refsInput.pattern = this.props.required ? ".+" : ".*"
             }
@@ -564,7 +564,7 @@
             if (supportsValidation) {
-                this.refs.input.checkValidity()
-                valid = this.refs.input.validity.valid
+                this.refsInput.checkValidity()
+                valid = this.refsInput.validity.valid
 
                 if (!valid) {
-                    validationError = this.refs.input.validationMessage
+                    validationError = this.refsInput.validationMessage
                 }
@@ -575,3 +575,3 @@ }
             if (valid && supportsValidation && this.props.maxLength) {
-                if (this.refs.input.value.length > this.props.maxLength) {
+                if (this.refsInput.value.length > this.props.maxLength) {
                     validationError = "This value is too long"
@@ -583,3 +583,3 @@ }
         validationError = validationError || (
-            valid ? "" : this.refs.input.validationMessage || "Unknown Error"
+            valid ? "" : this.refsInput.validationMessage || "Unknown Error"
         )
@@ -590,3 +590,3 @@
         if (validationError) {
-            addClass(this.refs.wrapper, "has-error")
+            addClass(this.refsWrapper, "has-error")
             if (validStateChanged) {
@@ -597,3 +597,3 @@ this._invokeEventCallback(
                     this.state.value,
-                    this.refs.input.value
+                    this.refsInput.value
                 )
@@ -603,3 +603,3 @@ }
         else {
-            removeClass(this.refs.wrapper, "has-error")
+            removeClass(this.refsWrapper, "has-error")
             if (validStateChanged) {
@@ -609,3 +609,3 @@ this._invokeEventCallback(
                     this.state.value,
-                    this.refs.input.value
+                    this.refsInput.value
                 )
@@ -734,21 +734,21 @@ }
             else {
-                let value = this.refs.input.value, length = value.length;
+                let value = this.refsInput.value, length = value.length;
                 if (e.keyCode === 8) { // backspace
-                    if (this.refs.input.selectionStart == this.refs.input.selectionEnd &&
-                        this.refs.input.selectionEnd > 0 &&
+                    if (this.refsInput.selectionStart == this.refsInput.selectionEnd &&
+                        this.refsInput.selectionEnd > 0 &&
                         value.length &&
-                        value.charAt(this.refs.input.selectionEnd - 1) === ".")
+                        value.charAt(this.refsInput.selectionEnd - 1) === ".")
                     {
                         e.preventDefault();
-                        this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd - 1;
+                        this.refsInput.selectionStart = this.refsInput.selectionEnd = this.refsInput.selectionEnd - 1;
                     }
                 }
                 else if (e.keyCode === 46) { // delete
-                    if (this.refs.input.selectionStart == this.refs.input.selectionEnd &&
-                        this.refs.input.selectionEnd < length + 1 &&
+                    if (this.refsInput.selectionStart == this.refsInput.selectionEnd &&
+                        this.refsInput.selectionEnd < length + 1 &&
                         value.length &&
-                        value.charAt(this.refs.input.selectionEnd) === ".")
+                        value.charAt(this.refsInput.selectionEnd) === ".")
                     {
                         e.preventDefault();
-                        this.refs.input.selectionStart = this.refs.input.selectionEnd = this.refs.input.selectionEnd + 1;
+                        this.refsInput.selectionStart = this.refsInput.selectionEnd = this.refsInput.selectionEnd + 1;
                     }
@@ -874,3 +874,3 @@ }
             step, min, max, precision, parse, format, mobile, snap, componentClass,
-            value, type, style, defaultValue, onInvalid, onValid, strict,
+            value, type, style, defaultValue, onInvalid, onValid, strict, noStyle,
 
@@ -881,2 +881,4 @@ // The rest are passed to the input
 
+        noStyle = noStyle || style === false;
+
         // Build the styles
@@ -906,5 +908,5 @@ for (let x in NumericInput.style) {
             wrap : {
-                style       : style === false ? null : css.wrap,
+                style       : noStyle ? null : css.wrap,
                 className   : 'react-numeric-input',
-                ref         : 'wrapper',
+                ref: (e)=>{if(e!=null && e!= undefined){this.refsWrapper=e;}},
                 onMouseUp   : undefined,
@@ -914,5 +916,5 @@ onMouseLeave: undefined
             input : {
-                ref: 'input',
+                ref: (e)=>{if(e!=null && e!= undefined){this.refsInput=e;}},
                 type: 'text',
-                style: style === false ? null : Object.assign(
+                style: noStyle ? null : Object.assign(
                     {},
@@ -923,3 +925,3 @@ css.input,
                         {},
-                    state.inputFocus ? css['input:focus'] : {}
+                    this._inputFocus ? css['input:focus'] : {}
                 ),
@@ -935,7 +937,7 @@ ...rest
                 onTouchEnd  : undefined,
-                style: style === false ? null : Object.assign(
+                style: noStyle ? null : Object.assign(
                     {},
                     css.btn,
                     css.btnUp,
-                    props.disabled ?
+                    props.disabled || props.readOnly ?
                         css['btn:disabled'] :
@@ -956,7 +958,7 @@ state.btnUpActive ?
                 onTouchEnd  : undefined,
-                style: style === false ? null : Object.assign(
+                style: noStyle ? null : Object.assign(
                     {},
                     css.btn,
                     css.btnDown,
-                    props.disabled ?
+                    props.disabled || props.readOnly ?
                         css['btn:disabled'] :
@@ -983,4 +985,6 @@ state.btnDownActive ?
 
+        let loose = !this._isStrict && (this._inputFocus || !this._isMounted)
+
         // incomplete number
-        if (RE_INCOMPLETE_NUMBER.test(stringValue)) {
+        if (loose && RE_INCOMPLETE_NUMBER.test(stringValue)) {
             attrs.input.value = stringValue;
@@ -990,3 +994,3 @@ }
         // Not a number and not empty (loose mode only)
-        else if (!this._isStrict && stringValue && !RE_NUMBER.test(stringValue)) {
+        else if (loose && stringValue && !RE_NUMBER.test(stringValue)) {
             attrs.input.value = stringValue;
@@ -1017,3 +1021,3 @@ }
         // Attach event listeners if the widget is not disabled
-        if (!props.disabled) {
+        if (!props.disabled && !props.readOnly) {
             Object.assign(attrs.wrap, {
@@ -1048,6 +1052,6 @@ onMouseUp    : this.stop,
                     args[0].persist();
+                    this._inputFocus = true;
                     this.setState({
                         btnUpHover  : true,
-                        btnUpActive : true,
-                        inputFocus  : true
+                        btnUpActive : true
                     }, () => {
@@ -1085,6 +1089,6 @@ this._invokeEventCallback("onFocus", ...args)
                     args[0].persist();
+                    this._inputFocus = true;
                     this.setState({
                         btnDownHover  : true,
-                        btnDownActive : true,
-                        inputFocus    : true
+                        btnDownActive : true
                     }, () => {
@@ -1120,10 +1124,9 @@ this._invokeEventCallback("onFocus", ...args)
                     args[0].persist();
-                    this.setState({ inputFocus: true }, () => {
-                        const val = this._parse(args[0].target.value);
-                        this.setState({
-                            value: val,
-                            stringValue: val || val === 0 ? val + "" : ""
-                        }, () => {
-                            this._invokeEventCallback("onFocus", ...args)
-                        })
+                    this._inputFocus = true;
+                    const val = this._parse(args[0].target.value);
+                    this.setState({
+                        value: val,
+                        stringValue: val || val === 0 ? val + "" : ""
+                    }, () => {
+                        this._invokeEventCallback("onFocus", ...args)
                     });
@@ -1135,10 +1138,9 @@ },
                     args[0].persist();
-                    this.setState({ inputFocus: false }, () => {
-                        const val = this._parse(args[0].target.value);
-                        this.setState({
-                            value: val
-                        }, () => {
-                            this._invokeEventCallback("onBlur", ...args)
-                            this._isStrict = _isStrict
-                        })
+                    this._inputFocus = false;
+                    const val = this._parse(args[0].target.value);
+                    this.setState({
+                        value: val
+                    }, () => {
+                        this._invokeEventCallback("onBlur", ...args)
+                        this._isStrict = _isStrict
                     });
@@ -1149,3 +1151,3 @@ }
         else {
-            if (style !== false) {
+            if (!noStyle && props.disabled) {
                 Object.assign(attrs.input.style, css['input:disabled'])
@@ -1162,7 +1164,7 @@ }
                     <b {...attrs.btnUp}>
-                        <i style={ style === false ? null : css.minus }/>
-                        <i style={ style === false ? null : css.plus }/>
+                        <i style={ noStyle ? null : css.minus }/>
+                        <i style={ noStyle ? null : css.plus }/>
                     </b>
                     <b {...attrs.btnDown}>
-                        <i style={ style === false ? null : css.minus }/>
+                        <i style={ noStyle ? null : css.minus }/>
                     </b>
@@ -1177,6 +1179,6 @@ </span>
                 <b {...attrs.btnUp}>
-                    <i style={ style === false ? null : css.arrowUp }/>
+                    <i style={ noStyle ? null : css.arrowUp }/>
                 </b>
                 <b {...attrs.btnDown}>
-                    <i style={ style === false ? null : css.arrowDown }/>
+                    <i style={ noStyle ? null : css.arrowDown }/>
                 </b>
@@ -1183,0 +1185,0 @@ </span>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

378962

increased by0.55%

Lines of code

7474

increased by0.46%

Number of lines in readme file

206

increased by3.52%

No dependency changes