From b424a4584beac48f528c514ff15ea70f8b40dca4 Mon Sep 17 00:00:00 2001
From: s-yadav <sudhanshuyadav2@gmail.com>
Date: Sun, 11 Nov 2018 22:08:29 +0530
Subject: [PATCH] - Maintain caret position if suffix/prefix is updated while
 typing #249. - Refactor code to have one place to update state and caret
 position.

- Add spec for maintaining caret pos when . is used instead of decimal separator
---
 dist/react-number-format.es.js            | 135 +++--
 dist/react-number-format.js               | 135 +++--
 dist/react-number-format.min.js           |   4 +-
 lib/number_format.js                      | 129 ++--
 lib/utils.js                              |   6 +
 package.json                              |   2 +-
 src/number_format.js                      | 108 ++--
 src/utils.js                              |   5 +
 test/library/input_numeric_format.spec.js |  10 +-
 test/library/keypress_and_caret.spec.js   | 693 +++++++++++-----------
 test/test_util.js                         |  10 +-
 11 files changed, 681 insertions(+), 556 deletions(-)

diff --git a/dist/react-number-format.es.js b/dist/react-number-format.es.js
index d9ae3398..b22e25ea 100644
--- a/dist/react-number-format.es.js
+++ b/dist/react-number-format.es.js
@@ -1,5 +1,5 @@
 /**
- * react-number-format - 4.0.3
+ * react-number-format - 4.0.4
  * Author : Sudhanshu Yadav
  * Copyright (c) 2016, 2018 to Sudhanshu Yadav, released under the MIT license.
  * https://github.com/s-yadav/react-number-format
@@ -496,6 +496,10 @@ function findChangedIndex(prevValue, newValue) {
 function clamp(num, min, max) {
   return Math.min(Math.max(num, min), max);
 }
+function getCurrentCaretPosition(el) {
+  /*Max of selectionStart and selectionEnd is taken for the patch of pixel and other mobile device caret bug*/
+  return Math.max(el.selectionStart, el.selectionEnd);
+}
 
 var propTypes$1 = {
   thousandSeparator: propTypes.oneOfType([propTypes.string, propTypes.oneOf([true])]),
@@ -590,8 +594,7 @@ function (_React$Component) {
     value: function updateValueIfRequired(prevProps) {
       var props = this.props,
           state = this.state,
-          inFocus = this.inFocus;
-      var onValueChange = props.onValueChange;
+          focusedElm = this.focusedElm;
       var stateValue = state.value,
           _state$numAsString = state.numAsString,
           lastNumStr = _state$numAsString === void 0 ? '' : _state$numAsString;
@@ -608,12 +611,12 @@ function (_React$Component) {
         if ( //while typing set state only when float value changes
         (!isNaN(floatValue) || !isNaN(lastFloatValue)) && floatValue !== lastFloatValue || //can also set state when float value is same and the format props changes
         lastValueWithNewFormat !== stateValue || //set state always when not in focus and formatted value is changed
-        inFocus === false && formattedValue !== stateValue) {
-          this.setState({
-            value: formattedValue,
-            numAsString: numAsString
+        focusedElm === null && formattedValue !== stateValue) {
+          this.updateValue({
+            formattedValue: formattedValue,
+            numAsString: numAsString,
+            input: focusedElm
           });
-          onValueChange(this.getValueObject(formattedValue, numAsString));
         }
       }
     }
@@ -1169,6 +1172,54 @@ function (_React$Component) {
 
       return value;
     }
+    /** Update value and caret position */
+
+  }, {
+    key: "updateValue",
+    value: function updateValue(params) {
+      var _this2 = this;
+
+      var onUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
+      var formattedValue = params.formattedValue,
+          input = params.input;
+      var numAsString = params.numAsString,
+          caretPos = params.caretPos;
+      var onValueChange = this.props.onValueChange;
+      var lastValue = this.state.value; //set caret position, and value imperatively when element is provided
+
+      if (input) {
+        //calculate caret position if not defined
+        if (!caretPos) {
+          var inputValue = params.inputValue || input.value;
+          var currentCaretPosition = getCurrentCaretPosition(input); //get the caret position
+
+          caretPos = this.getCaretPosition(inputValue, formattedValue, currentCaretPosition);
+        } //set the value imperatively, this is required for IE fix
+
+
+        input.value = formattedValue; //set caret position
+
+        this.setPatchedCaretPosition(input, caretPos, formattedValue);
+      } //calculate numeric string if not passed
+
+
+      if (numAsString === undefined) {
+        numAsString = this.removeFormatting(formattedValue);
+      } //update state if value is changed
+
+
+      if (formattedValue !== lastValue) {
+        this.setState({
+          value: formattedValue,
+          numAsString: numAsString
+        }, function () {
+          onValueChange(_this2.getValueObject(formattedValue, numAsString));
+          onUpdate();
+        });
+      } else {
+        onUpdate();
+      }
+    }
   }, {
     key: "onChange",
     value: function onChange(e) {
@@ -1179,9 +1230,7 @@ function (_React$Component) {
           props = this.props;
       var isAllowed = props.isAllowed;
       var lastValue = state.value || '';
-      /*Max of selectionStart and selectionEnd is taken for the patch of pixel and other mobile device caret bug*/
-
-      var currentCaretPosition = Math.max(el.selectionStart, el.selectionEnd);
+      var currentCaretPosition = getCurrentCaretPosition(el);
       inputValue = this.correctInputValue(currentCaretPosition, lastValue, inputValue);
       var formattedValue = this.formatInput(inputValue) || '';
       var numAsString = this.removeFormatting(formattedValue);
@@ -1189,39 +1238,27 @@ function (_React$Component) {
 
       if (!isAllowed(valueObj)) {
         formattedValue = lastValue;
-      } //set the value imperatively, this is required for IE fix
-
-
-      el.value = formattedValue; //get the caret position
-
-      var caretPos = this.getCaretPosition(inputValue, formattedValue, currentCaretPosition); //set caret position
-
-      this.setPatchedCaretPosition(el, caretPos, formattedValue); //change the state
+      }
 
-      if (formattedValue !== lastValue) {
-        this.setState({
-          value: formattedValue,
-          numAsString: numAsString
-        }, function () {
-          props.onValueChange(valueObj);
-          props.onChange(e);
-        });
-      } else {
+      this.updateValue({
+        formattedValue: formattedValue,
+        numAsString: numAsString,
+        inputValue: inputValue,
+        input: el
+      }, function () {
         props.onChange(e);
-      }
+      });
     }
   }, {
     key: "onBlur",
     value: function onBlur(e) {
-      var _this2 = this;
-
       var props = this.props,
           state = this.state;
       var format = props.format,
           onBlur = props.onBlur;
       var numAsString = state.numAsString;
       var lastValue = state.value;
-      this.inFocus = false;
+      this.focusedElm = null;
 
       if (!format) {
         numAsString = fixLeadingZero(numAsString);
@@ -1230,13 +1267,10 @@ function (_React$Component) {
         if (formattedValue !== lastValue) {
           // the event needs to be persisted because its properties can be accessed in an asynchronous way
           e.persist();
-          this.setState({
-            value: formattedValue,
+          this.updateValue({
+            formattedValue: formattedValue,
             numAsString: numAsString
           }, function () {
-            var valueObj = _this2.getValueObject(formattedValue, numAsString);
-
-            props.onValueChange(valueObj);
             onBlur(e);
           });
           return;
@@ -1248,8 +1282,6 @@ function (_React$Component) {
   }, {
     key: "onKeyDown",
     value: function onKeyDown(e) {
-      var _this3 = this;
-
       var el = e.target;
       var key = e.key;
       var selectionStart = el.selectionStart,
@@ -1307,18 +1339,13 @@ function (_React$Component) {
         we will not have any information of keyPress
         */
         if (selectionStart <= leftBound + 1 && value[0] === '-' && typeof format === 'undefined') {
-          var newValue = value.substring(1);
-          var numAsString = this.removeFormatting(newValue);
-          var valueObj = this.getValueObject(newValue, numAsString); //persist event before performing async task
+          var newValue = value.substring(1); //persist event before performing async task
 
           e.persist();
-          this.setState({
-            value: newValue,
-            numAsString: numAsString
-          }, function () {
-            _this3.setPatchedCaretPosition(el, newCaretPosition, newValue);
-
-            onValueChange(valueObj);
+          this.updateValue({
+            formattedValue: newValue,
+            caretPos: newCaretPosition,
+            input: el
           });
         } else if (!negativeRegex.test(value[expectedCaretPosition])) {
           while (!numRegex.test(value[newCaretPosition - 1]) && newCaretPosition > leftBound) {
@@ -1372,12 +1399,12 @@ function (_React$Component) {
   }, {
     key: "onFocus",
     value: function onFocus(e) {
-      var _this4 = this;
+      var _this3 = this;
 
       // Workaround Chrome and Safari bug https://bugs.chromium.org/p/chromium/issues/detail?id=779328
       // (onFocus event target selectionStart is always 0 before setTimeout)
       e.persist();
-      this.inFocus = true;
+      this.focusedElm = e.target;
       setTimeout(function () {
         var el = e.target;
         var selectionStart = el.selectionStart,
@@ -1385,14 +1412,14 @@ function (_React$Component) {
             _el$value3 = el.value,
             value = _el$value3 === void 0 ? '' : _el$value3;
 
-        var caretPosition = _this4.correctCaretPosition(value, selectionStart); //setPatchedCaretPosition only when everything is not selected on focus (while tabbing into the field)
+        var caretPosition = _this3.correctCaretPosition(value, selectionStart); //setPatchedCaretPosition only when everything is not selected on focus (while tabbing into the field)
 
 
         if (caretPosition !== selectionStart && !(selectionStart === 0 && selectionEnd === value.length)) {
-          _this4.setPatchedCaretPosition(el, caretPosition, value);
+          _this3.setPatchedCaretPosition(el, caretPosition, value);
         }
 
-        _this4.props.onFocus(e);
+        _this3.props.onFocus(e);
       }, 0);
     }
   }, {
diff --git a/dist/react-number-format.js b/dist/react-number-format.js
index 20d5711e..29dc20bb 100644
--- a/dist/react-number-format.js
+++ b/dist/react-number-format.js
@@ -1,5 +1,5 @@
 /**
- * react-number-format - 4.0.3
+ * react-number-format - 4.0.4
  * Author : Sudhanshu Yadav
  * Copyright (c) 2016, 2018 to Sudhanshu Yadav, released under the MIT license.
  * https://github.com/s-yadav/react-number-format
@@ -502,6 +502,10 @@
   function clamp(num, min, max) {
     return Math.min(Math.max(num, min), max);
   }
+  function getCurrentCaretPosition(el) {
+    /*Max of selectionStart and selectionEnd is taken for the patch of pixel and other mobile device caret bug*/
+    return Math.max(el.selectionStart, el.selectionEnd);
+  }
 
   var propTypes$1 = {
     thousandSeparator: propTypes.oneOfType([propTypes.string, propTypes.oneOf([true])]),
@@ -596,8 +600,7 @@
       value: function updateValueIfRequired(prevProps) {
         var props = this.props,
             state = this.state,
-            inFocus = this.inFocus;
-        var onValueChange = props.onValueChange;
+            focusedElm = this.focusedElm;
         var stateValue = state.value,
             _state$numAsString = state.numAsString,
             lastNumStr = _state$numAsString === void 0 ? '' : _state$numAsString;
@@ -614,12 +617,12 @@
           if ( //while typing set state only when float value changes
           (!isNaN(floatValue) || !isNaN(lastFloatValue)) && floatValue !== lastFloatValue || //can also set state when float value is same and the format props changes
           lastValueWithNewFormat !== stateValue || //set state always when not in focus and formatted value is changed
-          inFocus === false && formattedValue !== stateValue) {
-            this.setState({
-              value: formattedValue,
-              numAsString: numAsString
+          focusedElm === null && formattedValue !== stateValue) {
+            this.updateValue({
+              formattedValue: formattedValue,
+              numAsString: numAsString,
+              input: focusedElm
             });
-            onValueChange(this.getValueObject(formattedValue, numAsString));
           }
         }
       }
@@ -1175,6 +1178,54 @@
 
         return value;
       }
+      /** Update value and caret position */
+
+    }, {
+      key: "updateValue",
+      value: function updateValue(params) {
+        var _this2 = this;
+
+        var onUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
+        var formattedValue = params.formattedValue,
+            input = params.input;
+        var numAsString = params.numAsString,
+            caretPos = params.caretPos;
+        var onValueChange = this.props.onValueChange;
+        var lastValue = this.state.value; //set caret position, and value imperatively when element is provided
+
+        if (input) {
+          //calculate caret position if not defined
+          if (!caretPos) {
+            var inputValue = params.inputValue || input.value;
+            var currentCaretPosition = getCurrentCaretPosition(input); //get the caret position
+
+            caretPos = this.getCaretPosition(inputValue, formattedValue, currentCaretPosition);
+          } //set the value imperatively, this is required for IE fix
+
+
+          input.value = formattedValue; //set caret position
+
+          this.setPatchedCaretPosition(input, caretPos, formattedValue);
+        } //calculate numeric string if not passed
+
+
+        if (numAsString === undefined) {
+          numAsString = this.removeFormatting(formattedValue);
+        } //update state if value is changed
+
+
+        if (formattedValue !== lastValue) {
+          this.setState({
+            value: formattedValue,
+            numAsString: numAsString
+          }, function () {
+            onValueChange(_this2.getValueObject(formattedValue, numAsString));
+            onUpdate();
+          });
+        } else {
+          onUpdate();
+        }
+      }
     }, {
       key: "onChange",
       value: function onChange(e) {
@@ -1185,9 +1236,7 @@
             props = this.props;
         var isAllowed = props.isAllowed;
         var lastValue = state.value || '';
-        /*Max of selectionStart and selectionEnd is taken for the patch of pixel and other mobile device caret bug*/
-
-        var currentCaretPosition = Math.max(el.selectionStart, el.selectionEnd);
+        var currentCaretPosition = getCurrentCaretPosition(el);
         inputValue = this.correctInputValue(currentCaretPosition, lastValue, inputValue);
         var formattedValue = this.formatInput(inputValue) || '';
         var numAsString = this.removeFormatting(formattedValue);
@@ -1195,39 +1244,27 @@
 
         if (!isAllowed(valueObj)) {
           formattedValue = lastValue;
-        } //set the value imperatively, this is required for IE fix
-
-
-        el.value = formattedValue; //get the caret position
-
-        var caretPos = this.getCaretPosition(inputValue, formattedValue, currentCaretPosition); //set caret position
-
-        this.setPatchedCaretPosition(el, caretPos, formattedValue); //change the state
+        }
 
-        if (formattedValue !== lastValue) {
-          this.setState({
-            value: formattedValue,
-            numAsString: numAsString
-          }, function () {
-            props.onValueChange(valueObj);
-            props.onChange(e);
-          });
-        } else {
+        this.updateValue({
+          formattedValue: formattedValue,
+          numAsString: numAsString,
+          inputValue: inputValue,
+          input: el
+        }, function () {
           props.onChange(e);
-        }
+        });
       }
     }, {
       key: "onBlur",
       value: function onBlur(e) {
-        var _this2 = this;
-
         var props = this.props,
             state = this.state;
         var format = props.format,
             onBlur = props.onBlur;
         var numAsString = state.numAsString;
         var lastValue = state.value;
-        this.inFocus = false;
+        this.focusedElm = null;
 
         if (!format) {
           numAsString = fixLeadingZero(numAsString);
@@ -1236,13 +1273,10 @@
           if (formattedValue !== lastValue) {
             // the event needs to be persisted because its properties can be accessed in an asynchronous way
             e.persist();
-            this.setState({
-              value: formattedValue,
+            this.updateValue({
+              formattedValue: formattedValue,
               numAsString: numAsString
             }, function () {
-              var valueObj = _this2.getValueObject(formattedValue, numAsString);
-
-              props.onValueChange(valueObj);
               onBlur(e);
             });
             return;
@@ -1254,8 +1288,6 @@
     }, {
       key: "onKeyDown",
       value: function onKeyDown(e) {
-        var _this3 = this;
-
         var el = e.target;
         var key = e.key;
         var selectionStart = el.selectionStart,
@@ -1313,18 +1345,13 @@
           we will not have any information of keyPress
           */
           if (selectionStart <= leftBound + 1 && value[0] === '-' && typeof format === 'undefined') {
-            var newValue = value.substring(1);
-            var numAsString = this.removeFormatting(newValue);
-            var valueObj = this.getValueObject(newValue, numAsString); //persist event before performing async task
+            var newValue = value.substring(1); //persist event before performing async task
 
             e.persist();
-            this.setState({
-              value: newValue,
-              numAsString: numAsString
-            }, function () {
-              _this3.setPatchedCaretPosition(el, newCaretPosition, newValue);
-
-              onValueChange(valueObj);
+            this.updateValue({
+              formattedValue: newValue,
+              caretPos: newCaretPosition,
+              input: el
             });
           } else if (!negativeRegex.test(value[expectedCaretPosition])) {
             while (!numRegex.test(value[newCaretPosition - 1]) && newCaretPosition > leftBound) {
@@ -1378,12 +1405,12 @@
     }, {
       key: "onFocus",
       value: function onFocus(e) {
-        var _this4 = this;
+        var _this3 = this;
 
         // Workaround Chrome and Safari bug https://bugs.chromium.org/p/chromium/issues/detail?id=779328
         // (onFocus event target selectionStart is always 0 before setTimeout)
         e.persist();
-        this.inFocus = true;
+        this.focusedElm = e.target;
         setTimeout(function () {
           var el = e.target;
           var selectionStart = el.selectionStart,
@@ -1391,14 +1418,14 @@
               _el$value3 = el.value,
               value = _el$value3 === void 0 ? '' : _el$value3;
 
-          var caretPosition = _this4.correctCaretPosition(value, selectionStart); //setPatchedCaretPosition only when everything is not selected on focus (while tabbing into the field)
+          var caretPosition = _this3.correctCaretPosition(value, selectionStart); //setPatchedCaretPosition only when everything is not selected on focus (while tabbing into the field)
 
 
           if (caretPosition !== selectionStart && !(selectionStart === 0 && selectionEnd === value.length)) {
-            _this4.setPatchedCaretPosition(el, caretPosition, value);
+            _this3.setPatchedCaretPosition(el, caretPosition, value);
           }
 
-          _this4.props.onFocus(e);
+          _this3.props.onFocus(e);
         }, 0);
       }
     }, {
diff --git a/dist/react-number-format.min.js b/dist/react-number-format.min.js
index 0e881141..effb8f31 100644
--- a/dist/react-number-format.min.js
+++ b/dist/react-number-format.min.js
@@ -1,8 +1,8 @@
 /**
- * react-number-format - 4.0.3
+ * react-number-format - 4.0.4
  * Author : Sudhanshu Yadav
  * Copyright (c) 2016, 2018 to Sudhanshu Yadav, released under the MIT license.
  * https://github.com/s-yadav/react-number-format
  */
 
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):t.NumberFormat=e(t.React)}(this,function(h){"use strict";function o(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function g(){return(g=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t}).apply(this,arguments)}function s(t){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function a(t,e){return(a=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function u(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function t(t){return function(){return t}}h=h&&h.hasOwnProperty("default")?h.default:h;var e=function(){};e.thatReturns=t,e.thatReturnsFalse=t(!1),e.thatReturnsTrue=t(!0),e.thatReturnsNull=t(null),e.thatReturnsThis=function(){return this},e.thatReturnsArgument=function(t){return t};var n=e;var i=function(t,e,r,n,o,a,i,s){if(!t){var u;if(void 0===e)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[r,n,o,a,i,s],c=0;(u=new Error(e.replace(/%s/g,function(){return l[c++]}))).name="Invariant Violation"}throw u.framesToPop=1,u}},r=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},r=0;r<10;r++)e["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(e).map(function(t){return e[t]}).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(t){n[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(t){return!1}})()&&Object.assign;var f,p=(function(t){t.exports=function(){function t(t,e,r,n,o,a){"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==a&&i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function e(){return t}var r={array:t.isRequired=t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return r.checkPropTypes=n,r.PropTypes=r}()}(f={exports:{}},f.exports),f.exports);function m(){}function d(t){return!!(t||"").match(/\d/)}function v(t){return t.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&")}function P(t){var e=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],r="-"===t[0],n=r&&e,o=(t=t.replace("-","")).split(".");return{beforeDecimal:o[0],afterDecimal:o[1]||"",hasNagation:r,addNegation:n}}function y(t,e,r){for(var n="",o=r?"0":"",a=0;a<=e-1;a++)n+=t[a]||o;return n}function S(t,e){if(t.value=t.value,null!==t){if(t.createTextRange){var r=t.createTextRange();return r.move("character",e),r.select(),!0}return t.selectionStart||0===t.selectionStart?(t.focus(),t.setSelectionRange(e,e),!0):(t.focus(),!1)}}function b(t,e,r){return Math.min(Math.max(t,e),r)}var x={thousandSeparator:p.oneOfType([p.string,p.oneOf([!0])]),decimalSeparator:p.string,thousandsGroupStyle:p.oneOf(["thousand","lakh","wan"]),decimalScale:p.number,fixedDecimalScale:p.bool,displayType:p.oneOf(["input","text"]),prefix:p.string,suffix:p.string,format:p.oneOfType([p.string,p.func]),removeFormatting:p.func,mask:p.oneOfType([p.string,p.arrayOf(p.string)]),value:p.oneOfType([p.number,p.string]),defaultValue:p.oneOfType([p.number,p.string]),isNumericString:p.bool,customInput:p.func,allowNegative:p.bool,allowEmptyFormatting:p.bool,onValueChange:p.func,onKeyDown:p.func,onMouseUp:p.func,onChange:p.func,onFocus:p.func,onBlur:p.func,type:p.oneOf(["text","tel","password"]),isAllowed:p.func,renderText:p.func,getInputRef:p.func},O={displayType:"input",decimalSeparator:".",thousandsGroupStyle:"thousand",fixedDecimalScale:!1,prefix:"",suffix:"",allowNegative:!0,allowEmptyFormatting:!1,isNumericString:!1,type:"text",onValueChange:m,onChange:m,onKeyDown:m,onMouseUp:m,onFocus:m,onBlur:m,isAllowed:function(){return!0},getInputRef:m},w=function(t){function i(t){var e,r,n;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),r=this,e=!(n=s(i).call(this,t))||"object"!=typeof n&&"function"!=typeof n?u(r):n;var o=t.defaultValue;e.validateProps();var a=e.formatValueProp(o);return e.state={value:a,numAsString:e.removeFormatting(a)},e.selectionBeforeInput={selectionStart:0,selectionEnd:0},e.onChange=e.onChange.bind(u(u(e))),e.onKeyDown=e.onKeyDown.bind(u(u(e))),e.onMouseUp=e.onMouseUp.bind(u(u(e))),e.onFocus=e.onFocus.bind(u(u(e))),e.onBlur=e.onBlur.bind(u(u(e))),e}var e,r,n;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&a(t,e)}(i,h.Component),e=i,(r=[{key:"componentDidUpdate",value:function(t){this.updateValueIfRequired(t)}},{key:"updateValueIfRequired",value:function(t){var e=this.props,r=this.state,n=this.inFocus,o=e.onValueChange,a=r.value,i=r.numAsString,s=void 0===i?"":i;if(t!==e){this.validateProps();var u=this.formatNumString(s),l=void 0===e.value?u:this.formatValueProp(),c=this.removeFormatting(l),f=parseFloat(c),p=parseFloat(s);(isNaN(f)&&isNaN(p)||f===p)&&u===a&&(!1!==n||l===a)||(this.setState({value:l,numAsString:c}),o(this.getValueObject(l,c)))}}},{key:"getFloatString",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=this.props.decimalScale,r=this.getSeparators().decimalSeparator,n=this.getNumberRegex(!0),o="-"===t[0];o&&(t=t.replace("-","")),r&&0===e&&(t=t.split(r)[0]);var a=(t=(t.match(n)||[]).join("").replace(r,".")).indexOf(".");return-1!==a&&(t="".concat(t.substring(0,a),".").concat(t.substring(a+1,t.length).replace(new RegExp(v(r),"g"),""))),o&&(t="-"+t),t}},{key:"getNumberRegex",value:function(t,e){var r=this.props,n=r.format,o=r.decimalScale,a=this.getSeparators().decimalSeparator;return new RegExp("\\d"+(!a||0===o||e||n?"":"|"+v(a)),t?"g":void 0)}},{key:"getSeparators",value:function(){var t=this.props.decimalSeparator,e=this.props.thousandSeparator;return!0===e&&(e=","),{decimalSeparator:t,thousandSeparator:e}}},{key:"getMaskAtIndex",value:function(t){var e=this.props.mask,r=void 0===e?" ":e;return"string"==typeof r?r:r[t]||" "}},{key:"getValueObject",value:function(t,e){var r=parseFloat(e);return{formattedValue:t,value:e,floatValue:isNaN(r)?void 0:r}}},{key:"validateProps",value:function(){var t=this.props.mask,e=this.getSeparators(),r=e.decimalSeparator,n=e.thousandSeparator;if(r===n)throw new Error("\n          Decimal separator can't be same as thousand separator.\n          thousandSeparator: ".concat(n,' (thousandSeparator = {true} is same as thousandSeparator = ",")\n          decimalSeparator: ').concat(r," (default value for decimalSeparator is .)\n       "));if(t&&("string"===t?t:t.toString()).match(/\d/g))throw new Error("\n          Mask ".concat(t," should not contain numeric character;\n        "))}},{key:"setPatchedCaretPosition",value:function(t,e,r){S(t,e),setTimeout(function(){t.value===r&&S(t,e)},0)}},{key:"correctCaretPosition",value:function(t,e,r){var n=this.props,o=n.prefix,a=n.suffix,i=n.format;if(""===t)return 0;if(e=b(e,0,t.length),!i){var s="-"===t[0];return b(e,o.length+(s?1:0),t.length-a.length)}if("function"==typeof i)return e;if("#"===i[e]&&d(t[e]))return e;if("#"===i[e-1]&&d(t[e-1]))return e;var u=i.indexOf("#");e=b(e,u,i.lastIndexOf("#")+1);for(var l=i.substring(e,i.length).indexOf("#"),c=e,f=e+(-1===l?0:l);u<c&&("#"!==i[c]||!d(t[c]));)c-=1;return!d(t[f])||"left"===r&&e!==u||e-c<f-e?d(t[c])?c+1:c:f}},{key:"getCaretPosition",value:function(t,e,r){var n,o,a=this.props.format,i=this.state.value,s=this.getNumberRegex(!0),u=(t.match(s)||[]).join(""),l=(e.match(s)||[]).join("");for(o=n=0;o<r;o++){var c=t[o]||"",f=e[n]||"";if((c.match(s)||c===f)&&("0"!==c||!f.match(s)||"0"===f||u.length===l.length)){for(;c!==e[n]&&n<e.length;)n++;n++}}return"string"!=typeof a||i||(n=e.length),n=this.correctCaretPosition(e,n)}},{key:"removePrefixAndSuffix",value:function(t){var e=this.props,r=e.format,n=e.prefix,o=e.suffix;if(!r&&t){var a="-"===t[0];a&&(t=t.substring(1,t.length));var i=(t=n&&0===t.indexOf(n)?t.substring(n.length,t.length):t).lastIndexOf(o);t=o&&-1!==i&&i===t.length-o.length?t.substring(0,i):t,a&&(t="-"+t)}return t}},{key:"removePatternFormatting",value:function(t){for(var e=this.props.format.split("#").filter(function(t){return""!==t}),r=0,n="",o=0,a=e.length;o<=a;o++){var i=e[o]||"",s=o===a?t.length:t.indexOf(i,r);if(-1===s){n=t;break}n+=t.substring(r,s),r=s+i.length}return(n.match(/\d/g)||[]).join("")}},{key:"removeFormatting",value:function(t){var e=this.props,r=e.format,n=e.removeFormatting;return t?t=r?"string"==typeof r?this.removePatternFormatting(t):"function"==typeof n?n(t):(t.match(/\d/g)||[]).join(""):(t=this.removePrefixAndSuffix(t),this.getFloatString(t)):t}},{key:"formatWithPattern",value:function(t){for(var e=this.props.format,r=0,n=e.split(""),o=0,a=e.length;o<a;o++)"#"===e[o]&&(n[o]=t[r]||this.getMaskAtIndex(r),r+=1);return n.join("")}},{key:"formatAsNumber",value:function(t){var e=this.props,r=e.decimalScale,n=e.fixedDecimalScale,o=e.prefix,a=e.suffix,i=e.allowNegative,s=e.thousandsGroupStyle,u=this.getSeparators(),l=u.thousandSeparator,c=u.decimalSeparator,f=-1!==t.indexOf(".")||r&&n,p=P(t,i),h=p.beforeDecimal,g=p.afterDecimal,m=p.addNegation;if(void 0!==r&&(g=y(g,r,n)),l){var d=function(t){switch(t){case"lakh":return/(\d+?)(?=(\d\d)+(\d)(?!\d))(\.\d+)?/g;case"wan":return/(\d)(?=(\d{4})+(?!\d))/g;case"thousand":default:return/(\d)(?=(\d{3})+(?!\d))/g}}(s);h=h.replace(d,"$1"+l)}return o&&(h=o+h),a&&(g+=a),m&&(h="-"+h),t=h+(f&&c||"")+g}},{key:"formatNumString",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=this.props,r=e.format,n=e.allowEmptyFormatting,o=t;return""!==t||n?"-"!==t||r?o="string"==typeof r?this.formatWithPattern(o):"function"==typeof r?r(o):this.formatAsNumber(o):(o="-",t=""):o="",o}},{key:"formatValueProp",value:function(t){var e=this.props,r=e.format,n=e.decimalScale,o=e.fixedDecimalScale,a=e.allowEmptyFormatting,i=this.props,s=i.value,u=void 0===s?t:s,l=i.isNumericString,c=!u&&0!==u;return c&&a&&(u=""),c&&!a?"":("number"==typeof u&&(u=u.toString(),l=!0),l&&!r&&"number"==typeof n&&(u=function(t,e,r){if(-1!==["","-"].indexOf(t))return t;var n=-1!==t.indexOf(".")&&e,o=P(t),a=o.beforeDecimal,i=o.afterDecimal,s=o.hasNagation,u=parseFloat("0.".concat(i||"0")).toFixed(e).split("."),l=a.split("").reverse().reduce(function(t,e,r){return t.length>r?(Number(t[0])+Number(e)).toString()+t.substring(1,t.length):e+t},u[0]),c=y(u[1]||"",Math.min(e,i.length),r),f=n?".":"";return"".concat(s?"-":"").concat(l).concat(f).concat(c)}(u,n,o)),l?this.formatNumString(u):this.formatInput(u))}},{key:"formatNegation",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=this.props.allowNegative,r=new RegExp("(-)"),n=new RegExp("(-)(.)*(-)"),o=r.test(t),a=n.test(t);return t=t.replace(/-/g,""),o&&!a&&e&&(t="-"+t),t}},{key:"formatInput",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";return this.props.format||(t=this.removePrefixAndSuffix(t),t=this.formatNegation(t)),t=this.removeFormatting(t),this.formatNumString(t)}},{key:"isCharacterAFormat",value:function(t,e){var r=this.props,n=r.format,o=r.prefix,a=r.suffix,i=r.decimalScale,s=r.fixedDecimalScale,u=this.getSeparators().decimalSeparator;return"string"==typeof n&&"#"!==n[t]||!(n||!(t<o.length||t>=e.length-a.length||i&&s&&e[t]===u))}},{key:"checkIfFormatGotDeleted",value:function(t,e,r){for(var n=t;n<e;n++)if(this.isCharacterAFormat(n,r))return!0;return!1}},{key:"correctInputValue",value:function(t,e,r){var n=this.props,o=n.format,a=n.allowNegative,i=n.prefix,s=n.suffix,u=this.getSeparators().decimalSeparator,l=this.state.numAsString||"",c=this.selectionBeforeInput,f=c.selectionStart,p=c.selectionEnd,h=function(t,e){for(var r=0,n=0,o=t.length,a=e.length;t[r]===e[r]&&r<o;)r++;for(;t[o-1-n]===e[a-1-n]&&r<a-n&&r<o-n;)n++;return{start:r,end:o-n}}(e,r),g=h.start,m=h.end;if(!o&&"."!==u&&g===m&&"."===r[f])return r.substr(0,f)+u+r.substr(f+1,r.length);var d=o?0:i.length,v=e.length-(o?0:s.length);if(r.length>e.length||!r.length||g===m||0===f&&p===e.length||f===d&&p===v)return r;if(this.checkIfFormatGotDeleted(g,m,e)&&(r=e),!o){var y=this.removeFormatting(r),S=P(y,a),b=S.beforeDecimal,x=S.afterDecimal,O=S.addNegation,w=t<r.indexOf(u)+1;if(y.length<l.length&&w&&""===b&&!parseFloat(x))return O?"-":""}return r}},{key:"onChange",value:function(t){t.persist();var e=t.target,r=e.value,n=this.state,o=this.props,a=o.isAllowed,i=n.value||"",s=Math.max(e.selectionStart,e.selectionEnd);r=this.correctInputValue(s,i,r);var u=this.formatInput(r)||"",l=this.removeFormatting(u),c=this.getValueObject(u,l);a(c)||(u=i),e.value=u;var f=this.getCaretPosition(r,u,s);this.setPatchedCaretPosition(e,f,u),u!==i?this.setState({value:u,numAsString:l},function(){o.onValueChange(c),o.onChange(t)}):o.onChange(t)}},{key:"onBlur",value:function(e){var r=this,n=this.props,t=this.state,o=n.format,a=n.onBlur,i=t.numAsString,s=t.value;if(this.inFocus=!1,!o){i=function(t){if(!t)return t;var e="-"===t[0];e&&(t=t.substring(1,t.length));var r=t.split("."),n=r[0].replace(/^0+/,"")||"0",o=r[1]||"";return"".concat(e?"-":"").concat(n).concat(o?".".concat(o):"")}(i);var u=this.formatNumString(i);if(u!==s)return e.persist(),void this.setState({value:u,numAsString:i},function(){var t=r.getValueObject(u,i);n.onValueChange(t),a(e)})}a(e)}},{key:"onKeyDown",value:function(t){var e,r=this,n=t.target,o=t.key,a=n.selectionStart,i=n.selectionEnd,s=n.value,u=void 0===s?"":s,l=this.props,c=l.decimalScale,f=l.fixedDecimalScale,p=l.prefix,h=l.suffix,g=l.format,m=l.onKeyDown,d=l.onValueChange,v=void 0!==c&&f,y=this.getNumberRegex(!1,v),S=new RegExp("-"),b="string"==typeof g;if(this.selectionBeforeInput={selectionStart:a,selectionEnd:i},"ArrowLeft"===o||"Backspace"===o?e=a-1:"ArrowRight"===o?e=a+1:"Delete"===o&&(e=a),void 0!==e&&a===i){var x=e,O=b?g.indexOf("#"):p.length,w=b?g.lastIndexOf("#")+1:u.length-h.length;if("ArrowLeft"===o||"ArrowRight"===o){var P="ArrowLeft"===o?"left":"right";x=this.correctCaretPosition(u,e,P)}else if("Delete"!==o||y.test(u[e])||S.test(u[e])){if("Backspace"===o&&!y.test(u[e]))if(a<=O+1&&"-"===u[0]&&void 0===g){var k=u.substring(1),F=this.removeFormatting(k),N=this.getValueObject(k,F);t.persist(),this.setState({value:k,numAsString:F},function(){r.setPatchedCaretPosition(n,x,k),d(N)})}else if(!S.test(u[e])){for(;!y.test(u[x-1])&&O<x;)x--;x=this.correctCaretPosition(u,x,"left")}}else for(;!y.test(u[x])&&x<w;)x++;(x!==e||e<O||w<e)&&(t.preventDefault(),this.setPatchedCaretPosition(n,x,u)),t.isUnitTestRun&&this.setPatchedCaretPosition(n,x,u),this.props.onKeyDown(t)}else m(t)}},{key:"onMouseUp",value:function(t){var e=t.target,r=e.selectionStart,n=e.selectionEnd,o=e.value,a=void 0===o?"":o;if(r===n){var i=this.correctCaretPosition(a,r);i!==r&&this.setPatchedCaretPosition(e,i,a)}this.props.onMouseUp(t)}},{key:"onFocus",value:function(i){var s=this;i.persist(),this.inFocus=!0,setTimeout(function(){var t=i.target,e=t.selectionStart,r=t.selectionEnd,n=t.value,o=void 0===n?"":n,a=s.correctCaretPosition(o,e);a===e||0===e&&r===o.length||s.setPatchedCaretPosition(t,a,o),s.props.onFocus(i)},0)}},{key:"render",value:function(){var e,r,n,t=this.props,o=t.type,a=t.displayType,i=t.customInput,s=t.renderText,u=t.getInputRef,l=this.state.value,c=(e=this.props,r=x,n={},Object.keys(e).forEach(function(t){r[t]||(n[t]=e[t])}),n),f=g({},c,{type:o,value:l,onChange:this.onChange,onKeyDown:this.onKeyDown,onMouseUp:this.onMouseUp,onFocus:this.onFocus,onBlur:this.onBlur});if("text"===a)return s?s(l)||null:h.createElement("span",g({},c,{ref:u}),l);if(i){var p=i;return h.createElement(p,f)}return h.createElement("input",g({},f,{ref:u}))}}])&&o(e.prototype,r),n&&o(e,n),i}();return w.propTypes=x,w.defaultProps=O,w});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):t.NumberFormat=e(t.React)}(this,function(h){"use strict";function a(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function g(){return(g=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t}).apply(this,arguments)}function s(t){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function o(t,e){return(o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function u(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function t(t){return function(){return t}}h=h&&h.hasOwnProperty("default")?h.default:h;var e=function(){};e.thatReturns=t,e.thatReturnsFalse=t(!1),e.thatReturnsTrue=t(!0),e.thatReturnsNull=t(null),e.thatReturnsThis=function(){return this},e.thatReturnsArgument=function(t){return t};var n=e;var i=function(t,e,r,n,a,o,i,s){if(!t){var u;if(void 0===e)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[r,n,a,o,i,s],c=0;(u=new Error(e.replace(/%s/g,function(){return l[c++]}))).name="Invariant Violation"}throw u.framesToPop=1,u}},r=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},r=0;r<10;r++)e["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(e).map(function(t){return e[t]}).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(t){n[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(t){return!1}})()&&Object.assign;var f,p=(function(t){t.exports=function(){function t(t,e,r,n,a,o){"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==o&&i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function e(){return t}var r={array:t.isRequired=t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return r.checkPropTypes=n,r.PropTypes=r}()}(f={exports:{}},f.exports),f.exports);function m(){}function d(t){return!!(t||"").match(/\d/)}function v(t){return t.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&")}function P(t){var e=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],r="-"===t[0],n=r&&e,a=(t=t.replace("-","")).split(".");return{beforeDecimal:a[0],afterDecimal:a[1]||"",hasNagation:r,addNegation:n}}function y(t,e,r){for(var n="",a=r?"0":"",o=0;o<=e-1;o++)n+=t[o]||a;return n}function S(t,e){if(t.value=t.value,null!==t){if(t.createTextRange){var r=t.createTextRange();return r.move("character",e),r.select(),!0}return t.selectionStart||0===t.selectionStart?(t.focus(),t.setSelectionRange(e,e),!0):(t.focus(),!1)}}function b(t,e,r){return Math.min(Math.max(t,e),r)}function x(t){return Math.max(t.selectionStart,t.selectionEnd)}var O={thousandSeparator:p.oneOfType([p.string,p.oneOf([!0])]),decimalSeparator:p.string,thousandsGroupStyle:p.oneOf(["thousand","lakh","wan"]),decimalScale:p.number,fixedDecimalScale:p.bool,displayType:p.oneOf(["input","text"]),prefix:p.string,suffix:p.string,format:p.oneOfType([p.string,p.func]),removeFormatting:p.func,mask:p.oneOfType([p.string,p.arrayOf(p.string)]),value:p.oneOfType([p.number,p.string]),defaultValue:p.oneOfType([p.number,p.string]),isNumericString:p.bool,customInput:p.func,allowNegative:p.bool,allowEmptyFormatting:p.bool,onValueChange:p.func,onKeyDown:p.func,onMouseUp:p.func,onChange:p.func,onFocus:p.func,onBlur:p.func,type:p.oneOf(["text","tel","password"]),isAllowed:p.func,renderText:p.func,getInputRef:p.func},w={displayType:"input",decimalSeparator:".",thousandsGroupStyle:"thousand",fixedDecimalScale:!1,prefix:"",suffix:"",allowNegative:!0,allowEmptyFormatting:!1,isNumericString:!1,type:"text",onValueChange:m,onChange:m,onKeyDown:m,onMouseUp:m,onFocus:m,onBlur:m,isAllowed:function(){return!0},getInputRef:m},k=function(t){function i(t){var e,r,n;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),r=this,e=!(n=s(i).call(this,t))||"object"!=typeof n&&"function"!=typeof n?u(r):n;var a=t.defaultValue;e.validateProps();var o=e.formatValueProp(a);return e.state={value:o,numAsString:e.removeFormatting(o)},e.selectionBeforeInput={selectionStart:0,selectionEnd:0},e.onChange=e.onChange.bind(u(u(e))),e.onKeyDown=e.onKeyDown.bind(u(u(e))),e.onMouseUp=e.onMouseUp.bind(u(u(e))),e.onFocus=e.onFocus.bind(u(u(e))),e.onBlur=e.onBlur.bind(u(u(e))),e}var e,r,n;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&o(t,e)}(i,h.Component),e=i,(r=[{key:"componentDidUpdate",value:function(t){this.updateValueIfRequired(t)}},{key:"updateValueIfRequired",value:function(t){var e=this.props,r=this.state,n=this.focusedElm,a=r.value,o=r.numAsString,i=void 0===o?"":o;if(t!==e){this.validateProps();var s=this.formatNumString(i),u=void 0===e.value?s:this.formatValueProp(),l=this.removeFormatting(u),c=parseFloat(l),f=parseFloat(i);(isNaN(c)&&isNaN(f)||c===f)&&s===a&&(null!==n||u===a)||this.updateValue({formattedValue:u,numAsString:l,input:n})}}},{key:"getFloatString",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=this.props.decimalScale,r=this.getSeparators().decimalSeparator,n=this.getNumberRegex(!0),a="-"===t[0];a&&(t=t.replace("-","")),r&&0===e&&(t=t.split(r)[0]);var o=(t=(t.match(n)||[]).join("").replace(r,".")).indexOf(".");return-1!==o&&(t="".concat(t.substring(0,o),".").concat(t.substring(o+1,t.length).replace(new RegExp(v(r),"g"),""))),a&&(t="-"+t),t}},{key:"getNumberRegex",value:function(t,e){var r=this.props,n=r.format,a=r.decimalScale,o=this.getSeparators().decimalSeparator;return new RegExp("\\d"+(!o||0===a||e||n?"":"|"+v(o)),t?"g":void 0)}},{key:"getSeparators",value:function(){var t=this.props.decimalSeparator,e=this.props.thousandSeparator;return!0===e&&(e=","),{decimalSeparator:t,thousandSeparator:e}}},{key:"getMaskAtIndex",value:function(t){var e=this.props.mask,r=void 0===e?" ":e;return"string"==typeof r?r:r[t]||" "}},{key:"getValueObject",value:function(t,e){var r=parseFloat(e);return{formattedValue:t,value:e,floatValue:isNaN(r)?void 0:r}}},{key:"validateProps",value:function(){var t=this.props.mask,e=this.getSeparators(),r=e.decimalSeparator,n=e.thousandSeparator;if(r===n)throw new Error("\n          Decimal separator can't be same as thousand separator.\n          thousandSeparator: ".concat(n,' (thousandSeparator = {true} is same as thousandSeparator = ",")\n          decimalSeparator: ').concat(r," (default value for decimalSeparator is .)\n       "));if(t&&("string"===t?t:t.toString()).match(/\d/g))throw new Error("\n          Mask ".concat(t," should not contain numeric character;\n        "))}},{key:"setPatchedCaretPosition",value:function(t,e,r){S(t,e),setTimeout(function(){t.value===r&&S(t,e)},0)}},{key:"correctCaretPosition",value:function(t,e,r){var n=this.props,a=n.prefix,o=n.suffix,i=n.format;if(""===t)return 0;if(e=b(e,0,t.length),!i){var s="-"===t[0];return b(e,a.length+(s?1:0),t.length-o.length)}if("function"==typeof i)return e;if("#"===i[e]&&d(t[e]))return e;if("#"===i[e-1]&&d(t[e-1]))return e;var u=i.indexOf("#");e=b(e,u,i.lastIndexOf("#")+1);for(var l=i.substring(e,i.length).indexOf("#"),c=e,f=e+(-1===l?0:l);u<c&&("#"!==i[c]||!d(t[c]));)c-=1;return!d(t[f])||"left"===r&&e!==u||e-c<f-e?d(t[c])?c+1:c:f}},{key:"getCaretPosition",value:function(t,e,r){var n,a,o=this.props.format,i=this.state.value,s=this.getNumberRegex(!0),u=(t.match(s)||[]).join(""),l=(e.match(s)||[]).join("");for(a=n=0;a<r;a++){var c=t[a]||"",f=e[n]||"";if((c.match(s)||c===f)&&("0"!==c||!f.match(s)||"0"===f||u.length===l.length)){for(;c!==e[n]&&n<e.length;)n++;n++}}return"string"!=typeof o||i||(n=e.length),n=this.correctCaretPosition(e,n)}},{key:"removePrefixAndSuffix",value:function(t){var e=this.props,r=e.format,n=e.prefix,a=e.suffix;if(!r&&t){var o="-"===t[0];o&&(t=t.substring(1,t.length));var i=(t=n&&0===t.indexOf(n)?t.substring(n.length,t.length):t).lastIndexOf(a);t=a&&-1!==i&&i===t.length-a.length?t.substring(0,i):t,o&&(t="-"+t)}return t}},{key:"removePatternFormatting",value:function(t){for(var e=this.props.format.split("#").filter(function(t){return""!==t}),r=0,n="",a=0,o=e.length;a<=o;a++){var i=e[a]||"",s=a===o?t.length:t.indexOf(i,r);if(-1===s){n=t;break}n+=t.substring(r,s),r=s+i.length}return(n.match(/\d/g)||[]).join("")}},{key:"removeFormatting",value:function(t){var e=this.props,r=e.format,n=e.removeFormatting;return t?t=r?"string"==typeof r?this.removePatternFormatting(t):"function"==typeof n?n(t):(t.match(/\d/g)||[]).join(""):(t=this.removePrefixAndSuffix(t),this.getFloatString(t)):t}},{key:"formatWithPattern",value:function(t){for(var e=this.props.format,r=0,n=e.split(""),a=0,o=e.length;a<o;a++)"#"===e[a]&&(n[a]=t[r]||this.getMaskAtIndex(r),r+=1);return n.join("")}},{key:"formatAsNumber",value:function(t){var e=this.props,r=e.decimalScale,n=e.fixedDecimalScale,a=e.prefix,o=e.suffix,i=e.allowNegative,s=e.thousandsGroupStyle,u=this.getSeparators(),l=u.thousandSeparator,c=u.decimalSeparator,f=-1!==t.indexOf(".")||r&&n,p=P(t,i),h=p.beforeDecimal,g=p.afterDecimal,m=p.addNegation;if(void 0!==r&&(g=y(g,r,n)),l){var d=function(t){switch(t){case"lakh":return/(\d+?)(?=(\d\d)+(\d)(?!\d))(\.\d+)?/g;case"wan":return/(\d)(?=(\d{4})+(?!\d))/g;case"thousand":default:return/(\d)(?=(\d{3})+(?!\d))/g}}(s);h=h.replace(d,"$1"+l)}return a&&(h=a+h),o&&(g+=o),m&&(h="-"+h),t=h+(f&&c||"")+g}},{key:"formatNumString",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=this.props,r=e.format,n=e.allowEmptyFormatting,a=t;return""!==t||n?"-"!==t||r?a="string"==typeof r?this.formatWithPattern(a):"function"==typeof r?r(a):this.formatAsNumber(a):(a="-",t=""):a="",a}},{key:"formatValueProp",value:function(t){var e=this.props,r=e.format,n=e.decimalScale,a=e.fixedDecimalScale,o=e.allowEmptyFormatting,i=this.props,s=i.value,u=void 0===s?t:s,l=i.isNumericString,c=!u&&0!==u;return c&&o&&(u=""),c&&!o?"":("number"==typeof u&&(u=u.toString(),l=!0),l&&!r&&"number"==typeof n&&(u=function(t,e,r){if(-1!==["","-"].indexOf(t))return t;var n=-1!==t.indexOf(".")&&e,a=P(t),o=a.beforeDecimal,i=a.afterDecimal,s=a.hasNagation,u=parseFloat("0.".concat(i||"0")).toFixed(e).split("."),l=o.split("").reverse().reduce(function(t,e,r){return t.length>r?(Number(t[0])+Number(e)).toString()+t.substring(1,t.length):e+t},u[0]),c=y(u[1]||"",Math.min(e,i.length),r),f=n?".":"";return"".concat(s?"-":"").concat(l).concat(f).concat(c)}(u,n,a)),l?this.formatNumString(u):this.formatInput(u))}},{key:"formatNegation",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=this.props.allowNegative,r=new RegExp("(-)"),n=new RegExp("(-)(.)*(-)"),a=r.test(t),o=n.test(t);return t=t.replace(/-/g,""),a&&!o&&e&&(t="-"+t),t}},{key:"formatInput",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";return this.props.format||(t=this.removePrefixAndSuffix(t),t=this.formatNegation(t)),t=this.removeFormatting(t),this.formatNumString(t)}},{key:"isCharacterAFormat",value:function(t,e){var r=this.props,n=r.format,a=r.prefix,o=r.suffix,i=r.decimalScale,s=r.fixedDecimalScale,u=this.getSeparators().decimalSeparator;return"string"==typeof n&&"#"!==n[t]||!(n||!(t<a.length||t>=e.length-o.length||i&&s&&e[t]===u))}},{key:"checkIfFormatGotDeleted",value:function(t,e,r){for(var n=t;n<e;n++)if(this.isCharacterAFormat(n,r))return!0;return!1}},{key:"correctInputValue",value:function(t,e,r){var n=this.props,a=n.format,o=n.allowNegative,i=n.prefix,s=n.suffix,u=this.getSeparators().decimalSeparator,l=this.state.numAsString||"",c=this.selectionBeforeInput,f=c.selectionStart,p=c.selectionEnd,h=function(t,e){for(var r=0,n=0,a=t.length,o=e.length;t[r]===e[r]&&r<a;)r++;for(;t[a-1-n]===e[o-1-n]&&r<o-n&&r<a-n;)n++;return{start:r,end:a-n}}(e,r),g=h.start,m=h.end;if(!a&&"."!==u&&g===m&&"."===r[f])return r.substr(0,f)+u+r.substr(f+1,r.length);var d=a?0:i.length,v=e.length-(a?0:s.length);if(r.length>e.length||!r.length||g===m||0===f&&p===e.length||f===d&&p===v)return r;if(this.checkIfFormatGotDeleted(g,m,e)&&(r=e),!a){var y=this.removeFormatting(r),S=P(y,o),b=S.beforeDecimal,x=S.afterDecimal,O=S.addNegation,w=t<r.indexOf(u)+1;if(y.length<l.length&&w&&""===b&&!parseFloat(x))return O?"-":""}return r}},{key:"updateValue",value:function(t){var e=this,r=1<arguments.length&&void 0!==arguments[1]?arguments[1]:m,n=t.formattedValue,a=t.input,o=t.numAsString,i=t.caretPos,s=this.props.onValueChange,u=this.state.value;if(a){if(!i){var l=t.inputValue||a.value,c=x(a);i=this.getCaretPosition(l,n,c)}a.value=n,this.setPatchedCaretPosition(a,i,n)}void 0===o&&(o=this.removeFormatting(n)),n!==u?this.setState({value:n,numAsString:o},function(){s(e.getValueObject(n,o)),r()}):r()}},{key:"onChange",value:function(t){t.persist();var e=t.target,r=e.value,n=this.state,a=this.props,o=a.isAllowed,i=n.value||"",s=x(e);r=this.correctInputValue(s,i,r);var u=this.formatInput(r)||"",l=this.removeFormatting(u);o(this.getValueObject(u,l))||(u=i),this.updateValue({formattedValue:u,numAsString:l,inputValue:r,input:e},function(){a.onChange(t)})}},{key:"onBlur",value:function(t){var e=this.props,r=this.state,n=e.format,a=e.onBlur,o=r.numAsString,i=r.value;if(this.focusedElm=null,!n){o=function(t){if(!t)return t;var e="-"===t[0];e&&(t=t.substring(1,t.length));var r=t.split("."),n=r[0].replace(/^0+/,"")||"0",a=r[1]||"";return"".concat(e?"-":"").concat(n).concat(a?".".concat(a):"")}(o);var s=this.formatNumString(o);if(s!==i)return t.persist(),void this.updateValue({formattedValue:s,numAsString:o},function(){a(t)})}a(t)}},{key:"onKeyDown",value:function(t){var e,r=t.target,n=t.key,a=r.selectionStart,o=r.selectionEnd,i=r.value,s=void 0===i?"":i,u=this.props,l=u.decimalScale,c=u.fixedDecimalScale,f=u.prefix,p=u.suffix,h=u.format,g=u.onKeyDown,m=(u.onValueChange,void 0!==l&&c),d=this.getNumberRegex(!1,m),v=new RegExp("-"),y="string"==typeof h;if(this.selectionBeforeInput={selectionStart:a,selectionEnd:o},"ArrowLeft"===n||"Backspace"===n?e=a-1:"ArrowRight"===n?e=a+1:"Delete"===n&&(e=a),void 0!==e&&a===o){var S=e,b=y?h.indexOf("#"):f.length,x=y?h.lastIndexOf("#")+1:s.length-p.length;if("ArrowLeft"===n||"ArrowRight"===n){var O="ArrowLeft"===n?"left":"right";S=this.correctCaretPosition(s,e,O)}else if("Delete"!==n||d.test(s[e])||v.test(s[e])){if("Backspace"===n&&!d.test(s[e]))if(a<=b+1&&"-"===s[0]&&void 0===h){var w=s.substring(1);t.persist(),this.updateValue({formattedValue:w,caretPos:S,input:r})}else if(!v.test(s[e])){for(;!d.test(s[S-1])&&b<S;)S--;S=this.correctCaretPosition(s,S,"left")}}else for(;!d.test(s[S])&&S<x;)S++;(S!==e||e<b||x<e)&&(t.preventDefault(),this.setPatchedCaretPosition(r,S,s)),t.isUnitTestRun&&this.setPatchedCaretPosition(r,S,s),this.props.onKeyDown(t)}else g(t)}},{key:"onMouseUp",value:function(t){var e=t.target,r=e.selectionStart,n=e.selectionEnd,a=e.value,o=void 0===a?"":a;if(r===n){var i=this.correctCaretPosition(o,r);i!==r&&this.setPatchedCaretPosition(e,i,o)}this.props.onMouseUp(t)}},{key:"onFocus",value:function(i){var s=this;i.persist(),this.focusedElm=i.target,setTimeout(function(){var t=i.target,e=t.selectionStart,r=t.selectionEnd,n=t.value,a=void 0===n?"":n,o=s.correctCaretPosition(a,e);o===e||0===e&&r===a.length||s.setPatchedCaretPosition(t,o,a),s.props.onFocus(i)},0)}},{key:"render",value:function(){var e,r,n,t=this.props,a=t.type,o=t.displayType,i=t.customInput,s=t.renderText,u=t.getInputRef,l=this.state.value,c=(e=this.props,r=O,n={},Object.keys(e).forEach(function(t){r[t]||(n[t]=e[t])}),n),f=g({},c,{type:a,value:l,onChange:this.onChange,onKeyDown:this.onKeyDown,onMouseUp:this.onMouseUp,onFocus:this.onFocus,onBlur:this.onBlur});if("text"===o)return s?s(l)||null:h.createElement("span",g({},c,{ref:u}),l);if(i){var p=i;return h.createElement(p,f)}return h.createElement("input",g({},f,{ref:u}))}}])&&a(e.prototype,r),n&&a(e,n),i}();return k.propTypes=O,k.defaultProps=w,k});
diff --git a/lib/number_format.js b/lib/number_format.js
index 1eda16f3..9db57cb0 100644
--- a/lib/number_format.js
+++ b/lib/number_format.js
@@ -126,8 +126,7 @@ function (_React$Component) {
     value: function updateValueIfRequired(prevProps) {
       var props = this.props,
           state = this.state,
-          inFocus = this.inFocus;
-      var onValueChange = props.onValueChange;
+          focusedElm = this.focusedElm;
       var stateValue = state.value,
           _state$numAsString = state.numAsString,
           lastNumStr = _state$numAsString === void 0 ? '' : _state$numAsString;
@@ -144,12 +143,12 @@ function (_React$Component) {
         if ( //while typing set state only when float value changes
         (!isNaN(floatValue) || !isNaN(lastFloatValue)) && floatValue !== lastFloatValue || //can also set state when float value is same and the format props changes
         lastValueWithNewFormat !== stateValue || //set state always when not in focus and formatted value is changed
-        inFocus === false && formattedValue !== stateValue) {
-          this.setState({
-            value: formattedValue,
-            numAsString: numAsString
+        focusedElm === null && formattedValue !== stateValue) {
+          this.updateValue({
+            formattedValue: formattedValue,
+            numAsString: numAsString,
+            input: focusedElm
           });
-          onValueChange(this.getValueObject(formattedValue, numAsString));
         }
       }
     }
@@ -705,6 +704,54 @@ function (_React$Component) {
 
       return value;
     }
+    /** Update value and caret position */
+
+  }, {
+    key: "updateValue",
+    value: function updateValue(params) {
+      var _this2 = this;
+
+      var onUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _utils.noop;
+      var formattedValue = params.formattedValue,
+          input = params.input;
+      var numAsString = params.numAsString,
+          caretPos = params.caretPos;
+      var onValueChange = this.props.onValueChange;
+      var lastValue = this.state.value; //set caret position, and value imperatively when element is provided
+
+      if (input) {
+        //calculate caret position if not defined
+        if (!caretPos) {
+          var inputValue = params.inputValue || input.value;
+          var currentCaretPosition = (0, _utils.getCurrentCaretPosition)(input); //get the caret position
+
+          caretPos = this.getCaretPosition(inputValue, formattedValue, currentCaretPosition);
+        } //set the value imperatively, this is required for IE fix
+
+
+        input.value = formattedValue; //set caret position
+
+        this.setPatchedCaretPosition(input, caretPos, formattedValue);
+      } //calculate numeric string if not passed
+
+
+      if (numAsString === undefined) {
+        numAsString = this.removeFormatting(formattedValue);
+      } //update state if value is changed
+
+
+      if (formattedValue !== lastValue) {
+        this.setState({
+          value: formattedValue,
+          numAsString: numAsString
+        }, function () {
+          onValueChange(_this2.getValueObject(formattedValue, numAsString));
+          onUpdate();
+        });
+      } else {
+        onUpdate();
+      }
+    }
   }, {
     key: "onChange",
     value: function onChange(e) {
@@ -715,9 +762,7 @@ function (_React$Component) {
           props = this.props;
       var isAllowed = props.isAllowed;
       var lastValue = state.value || '';
-      /*Max of selectionStart and selectionEnd is taken for the patch of pixel and other mobile device caret bug*/
-
-      var currentCaretPosition = Math.max(el.selectionStart, el.selectionEnd);
+      var currentCaretPosition = (0, _utils.getCurrentCaretPosition)(el);
       inputValue = this.correctInputValue(currentCaretPosition, lastValue, inputValue);
       var formattedValue = this.formatInput(inputValue) || '';
       var numAsString = this.removeFormatting(formattedValue);
@@ -725,39 +770,27 @@ function (_React$Component) {
 
       if (!isAllowed(valueObj)) {
         formattedValue = lastValue;
-      } //set the value imperatively, this is required for IE fix
-
-
-      el.value = formattedValue; //get the caret position
-
-      var caretPos = this.getCaretPosition(inputValue, formattedValue, currentCaretPosition); //set caret position
-
-      this.setPatchedCaretPosition(el, caretPos, formattedValue); //change the state
+      }
 
-      if (formattedValue !== lastValue) {
-        this.setState({
-          value: formattedValue,
-          numAsString: numAsString
-        }, function () {
-          props.onValueChange(valueObj);
-          props.onChange(e);
-        });
-      } else {
+      this.updateValue({
+        formattedValue: formattedValue,
+        numAsString: numAsString,
+        inputValue: inputValue,
+        input: el
+      }, function () {
         props.onChange(e);
-      }
+      });
     }
   }, {
     key: "onBlur",
     value: function onBlur(e) {
-      var _this2 = this;
-
       var props = this.props,
           state = this.state;
       var format = props.format,
           onBlur = props.onBlur;
       var numAsString = state.numAsString;
       var lastValue = state.value;
-      this.inFocus = false;
+      this.focusedElm = null;
 
       if (!format) {
         numAsString = (0, _utils.fixLeadingZero)(numAsString);
@@ -766,13 +799,10 @@ function (_React$Component) {
         if (formattedValue !== lastValue) {
           // the event needs to be persisted because its properties can be accessed in an asynchronous way
           e.persist();
-          this.setState({
-            value: formattedValue,
+          this.updateValue({
+            formattedValue: formattedValue,
             numAsString: numAsString
           }, function () {
-            var valueObj = _this2.getValueObject(formattedValue, numAsString);
-
-            props.onValueChange(valueObj);
             onBlur(e);
           });
           return;
@@ -784,8 +814,6 @@ function (_React$Component) {
   }, {
     key: "onKeyDown",
     value: function onKeyDown(e) {
-      var _this3 = this;
-
       var el = e.target;
       var key = e.key;
       var selectionStart = el.selectionStart,
@@ -843,18 +871,13 @@ function (_React$Component) {
         we will not have any information of keyPress
         */
         if (selectionStart <= leftBound + 1 && value[0] === '-' && typeof format === 'undefined') {
-          var newValue = value.substring(1);
-          var numAsString = this.removeFormatting(newValue);
-          var valueObj = this.getValueObject(newValue, numAsString); //persist event before performing async task
+          var newValue = value.substring(1); //persist event before performing async task
 
           e.persist();
-          this.setState({
-            value: newValue,
-            numAsString: numAsString
-          }, function () {
-            _this3.setPatchedCaretPosition(el, newCaretPosition, newValue);
-
-            onValueChange(valueObj);
+          this.updateValue({
+            formattedValue: newValue,
+            caretPos: newCaretPosition,
+            input: el
           });
         } else if (!negativeRegex.test(value[expectedCaretPosition])) {
           while (!numRegex.test(value[newCaretPosition - 1]) && newCaretPosition > leftBound) {
@@ -908,12 +931,12 @@ function (_React$Component) {
   }, {
     key: "onFocus",
     value: function onFocus(e) {
-      var _this4 = this;
+      var _this3 = this;
 
       // Workaround Chrome and Safari bug https://bugs.chromium.org/p/chromium/issues/detail?id=779328
       // (onFocus event target selectionStart is always 0 before setTimeout)
       e.persist();
-      this.inFocus = true;
+      this.focusedElm = e.target;
       setTimeout(function () {
         var el = e.target;
         var selectionStart = el.selectionStart,
@@ -921,14 +944,14 @@ function (_React$Component) {
             _el$value3 = el.value,
             value = _el$value3 === void 0 ? '' : _el$value3;
 
-        var caretPosition = _this4.correctCaretPosition(value, selectionStart); //setPatchedCaretPosition only when everything is not selected on focus (while tabbing into the field)
+        var caretPosition = _this3.correctCaretPosition(value, selectionStart); //setPatchedCaretPosition only when everything is not selected on focus (while tabbing into the field)
 
 
         if (caretPosition !== selectionStart && !(selectionStart === 0 && selectionEnd === value.length)) {
-          _this4.setPatchedCaretPosition(el, caretPosition, value);
+          _this3.setPatchedCaretPosition(el, caretPosition, value);
         }
 
-        _this4.props.onFocus(e);
+        _this3.props.onFocus(e);
       }, 0);
     }
   }, {
diff --git a/lib/utils.js b/lib/utils.js
index a37a3aa0..1914b959 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -16,6 +16,7 @@ exports.omit = omit;
 exports.setCaretPosition = setCaretPosition;
 exports.findChangedIndex = findChangedIndex;
 exports.clamp = clamp;
+exports.getCurrentCaretPosition = getCurrentCaretPosition;
 
 // basic noop function
 function noop() {}
@@ -188,4 +189,9 @@ function findChangedIndex(prevValue, newValue) {
 
 function clamp(num, min, max) {
   return Math.min(Math.max(num, min), max);
+}
+
+function getCurrentCaretPosition(el) {
+  /*Max of selectionStart and selectionEnd is taken for the patch of pixel and other mobile device caret bug*/
+  return Math.max(el.selectionStart, el.selectionEnd);
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index f2adce8d..4ecb3571 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-number-format",
   "description": "React component to format number in an input or as a text.",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "main": "lib/number_format.js",
   "author": "Sudhanshu Yadav",
   "license": "MIT",
diff --git a/src/number_format.js b/src/number_format.js
index 208690ff..14b8cfe0 100644
--- a/src/number_format.js
+++ b/src/number_format.js
@@ -16,6 +16,7 @@ import {
   findChangedIndex,
   clamp,
   getThousandsGroupRegex,
+  getCurrentCaretPosition,
 } from './utils';
 
 
@@ -89,7 +90,7 @@ class NumberFormat extends React.Component {
   onMouseUp: Function
   onFocus: Function
   onBlur: Function
-  inFocus: boolean
+  focusedElm: HTMLElement
   selectionBeforeInput: {
     selectionStart: number,
     selectionEnd: number
@@ -127,8 +128,7 @@ class NumberFormat extends React.Component {
   }
 
   updateValueIfRequired(prevProps: Object) {
-    const {props, state, inFocus} = this;
-    const {onValueChange} = props;
+    const {props, state, focusedElm} = this;
     const {value: stateValue, numAsString: lastNumStr = ''} = state;
 
     if(prevProps !== props) {
@@ -149,14 +149,9 @@ class NumberFormat extends React.Component {
         //can also set state when float value is same and the format props changes
         lastValueWithNewFormat !== stateValue ||
         //set state always when not in focus and formatted value is changed
-        (inFocus === false && formattedValue !== stateValue)
+        (focusedElm === null && formattedValue !== stateValue)
       ) {
-        this.setState({
-          value : formattedValue,
-          numAsString,
-        });
-
-        onValueChange(this.getValueObject(formattedValue, numAsString));
+        this.updateValue({ formattedValue, numAsString, input: focusedElm });
       }
     }
   }
@@ -650,6 +645,57 @@ class NumberFormat extends React.Component {
     return value;
   }
 
+  /** Update value and caret position */
+  updateValue(params: {
+      formattedValue: string,
+      numAsString: string,
+      inputValue: string,
+      input: HTMLInputElement,
+      caretPos: number,
+    },
+    onUpdate?: Function = noop
+  ) {
+    const {formattedValue, input} = params;
+    let {numAsString, caretPos} = params;
+    const {onValueChange} = this.props;
+    const {value: lastValue} = this.state;
+
+    //set caret position, and value imperatively when element is provided
+    if (input) {
+
+      //calculate caret position if not defined
+      if (!caretPos) {
+        const inputValue = params.inputValue || input.value;
+
+        const currentCaretPosition = getCurrentCaretPosition(input);
+      
+        //get the caret position
+        caretPos = this.getCaretPosition(inputValue, formattedValue, currentCaretPosition);
+      }
+
+      //set the value imperatively, this is required for IE fix
+      input.value = formattedValue;
+
+      //set caret position
+      this.setPatchedCaretPosition(input, caretPos, formattedValue);
+    }
+
+    //calculate numeric string if not passed
+    if (numAsString === undefined) {
+      numAsString = this.removeFormatting(formattedValue);
+    }
+    
+    //update state if value is changed
+    if (formattedValue !== lastValue) {
+      this.setState({value : formattedValue, numAsString}, () => {
+        onValueChange(this.getValueObject(formattedValue, numAsString));
+        onUpdate();
+      });      
+    } else {
+      onUpdate();
+    }
+  }
+
   onChange(e: SyntheticInputEvent) {
     e.persist();
     const el = e.target;
@@ -658,8 +704,7 @@ class NumberFormat extends React.Component {
     const {isAllowed} = props;
     const lastValue = state.value || '';
 
-    /*Max of selectionStart and selectionEnd is taken for the patch of pixel and other mobile device caret bug*/
-    const currentCaretPosition = Math.max(el.selectionStart, el.selectionEnd);
+    const currentCaretPosition = getCurrentCaretPosition(el);
 
     inputValue =  this.correctInputValue(currentCaretPosition, lastValue, inputValue);
 
@@ -671,25 +716,11 @@ class NumberFormat extends React.Component {
     if (!isAllowed(valueObj)) {
       formattedValue = lastValue;
     }
-
-    //set the value imperatively, this is required for IE fix
-    el.value = formattedValue;
-
-    //get the caret position
-    const caretPos = this.getCaretPosition(inputValue, formattedValue, currentCaretPosition);
-
-    //set caret position
-    this.setPatchedCaretPosition(el, caretPos, formattedValue);
-
-    //change the state
-    if (formattedValue !== lastValue) {
-      this.setState({value : formattedValue, numAsString}, () => {
-        props.onValueChange(valueObj);
-        props.onChange(e);
-      });
-    } else {
+    
+    this.updateValue({ formattedValue, numAsString, inputValue, input: el }, () => {
       props.onChange(e);
-    }
+    });
+
   }
 
   onBlur(e: SyntheticInputEvent) {
@@ -698,7 +729,7 @@ class NumberFormat extends React.Component {
     let {numAsString} = state;
     const lastValue = state.value;
 
-    this.inFocus = false;
+    this.focusedElm = null;
 
     if (!format) {
       numAsString = fixLeadingZero(numAsString);
@@ -708,9 +739,7 @@ class NumberFormat extends React.Component {
       if (formattedValue !== lastValue) {
         // the event needs to be persisted because its properties can be accessed in an asynchronous way
         e.persist();
-        this.setState({value : formattedValue, numAsString}, () => {
-          const valueObj = this.getValueObject(formattedValue, numAsString);
-          props.onValueChange(valueObj);
+        this.updateValue({ formattedValue, numAsString }, () => {
           onBlur(e);
         });
         return;
@@ -767,15 +796,10 @@ class NumberFormat extends React.Component {
       */
       if (selectionStart <= leftBound + 1 && value[0] === '-' && typeof format === 'undefined') {
         const newValue = value.substring(1);
-        const numAsString = this.removeFormatting(newValue);
-        const valueObj = this.getValueObject(newValue, numAsString);
-
         //persist event before performing async task
         e.persist();
-        this.setState({value: newValue, numAsString}, () => {
-          this.setPatchedCaretPosition(el, newCaretPosition, newValue);
-          onValueChange(valueObj);
-        });
+
+        this.updateValue({formattedValue: newValue, caretPos: newCaretPosition, input: el});
       } else if (!negativeRegex.test(value[expectedCaretPosition])) {
         while (!numRegex.test(value[newCaretPosition - 1]) && newCaretPosition > leftBound){ newCaretPosition--; }
         newCaretPosition = this.correctCaretPosition(value, newCaretPosition, 'left');
@@ -824,7 +848,7 @@ class NumberFormat extends React.Component {
     // (onFocus event target selectionStart is always 0 before setTimeout)
     e.persist();
 
-    this.inFocus = true;
+    this.focusedElm = e.target;
 
     setTimeout(() => {
       const el = e.target;
diff --git a/src/utils.js b/src/utils.js
index 47a3046f..a410e430 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -155,3 +155,8 @@ export function findChangedIndex(prevValue: string, newValue: string) {
 export function clamp(num: number, min: number, max: number) {
   return Math.min(Math.max(num, min), max);
 }
+
+export function getCurrentCaretPosition(el: HTMLInputElement ) {
+  /*Max of selectionStart and selectionEnd is taken for the patch of pixel and other mobile device caret bug*/
+  return Math.max(el.selectionStart, el.selectionEnd);
+}
diff --git a/test/library/input_numeric_format.spec.js b/test/library/input_numeric_format.spec.js
index 07081b6f..690a6ecb 100644
--- a/test/library/input_numeric_format.spec.js
+++ b/test/library/input_numeric_format.spec.js
@@ -492,9 +492,16 @@ describe('Test NumberFormat as input with numeric format options', () => {
   });
 
   it('should allow typing . as decimal separator when some other decimal separator is given', () => {
+    let caretPos;
+    const setSelectionRange = (pos) => {
+      caretPos = pos;
+    }
+
     const wrapper = shallow(<NumberFormat decimalSeparator="," thousandSeparator="." value="234.456 Sq. ft" suffix=" Sq. ft"/>);
-    simulateKeyInput(wrapper.find('input'), '.', 5, 5);
+    simulateKeyInput(wrapper.find('input'), '.', 5, 5, setSelectionRange);
     expect(wrapper.state().value).toEqual('2.344,56 Sq. ft');
+    //check if caret position is maintained
+    expect(caretPos).toEqual(6);
 
     //it should allow typing actual separator
     simulateKeyInput(wrapper.find('input'), ',', 3, 3);
@@ -513,7 +520,6 @@ describe('Test NumberFormat as input with numeric format options', () => {
     simulateKeyInput(wrapper.find('input'), '-', 2);
     expect(wrapper.state().value).toEqual('-21-');
   });
-
   
 
   describe('Test thousand group style', () => {
diff --git a/test/library/keypress_and_caret.spec.js b/test/library/keypress_and_caret.spec.js
index 84be94f8..ef4f2fb0 100644
--- a/test/library/keypress_and_caret.spec.js
+++ b/test/library/keypress_and_caret.spec.js
@@ -1,104 +1,12 @@
 import React from 'react';
 import NumberFormat from '../../src/number_format';
+import ReactDOM from 'react-dom';
 
-import {simulateKeyInput, simulateMousUpEvent, simulateFocusEvent, shallow, persist} from '../test_util';
+import {simulateKeyInput, simulateMousUpEvent, simulateFocusEvent, shallow, mount, persist} from '../test_util';
 import {cardExpiry} from '../../custom_formatters/card_expiry';
 
-describe('Test character insertion', () => {
-  it('should add any number properly when input is empty without format prop passed', () => {
-    const wrapper = shallow(<NumberFormat thousandSeparator={true} prefix={'$'}/>);
+describe('Test keypress and caret position changes', () => {
 
-    simulateKeyInput(wrapper.find('input'), '1', 0);
-
-    expect(wrapper.state().value).toEqual('$1');
-
-    wrapper.setProps({value: ''});
-    wrapper.update();
-
-    simulateKeyInput(wrapper.find('input'), '2456789', 0);
-
-    expect(wrapper.state().value).toEqual('$2,456,789');
-  });
-
-  it('should add any number properly when input is empty with format prop passed', () => {
-    //case 1: Enter first number
-    const wrapper = shallow(<NumberFormat format="#### #### #### ####" mask="_"/>);
-    simulateKeyInput(wrapper.find('input'), '1', 0);
-    expect(wrapper.state().value).toEqual('1___ ____ ____ ____');
-
-    //case 2: if nun numeric character got added
-    wrapper.setProps({value: ''});
-    wrapper.update();
-    simulateKeyInput(wrapper.find('input'), 'b', 0);
-    expect(wrapper.state().value).toEqual('');
-
-    //case 3: Enter first multiple number
-    wrapper.setProps({value: undefined});
-    wrapper.setProps({value: ''});
-    wrapper.update();
-    simulateKeyInput(wrapper.find('input'), '2456789', 0);
-    expect(wrapper.state().value).toEqual('2456 789_ ____ ____');
-
-    //case 4: When alpha numeric character got added
-    wrapper.setProps({value: undefined});
-    wrapper.setProps({value: ''});
-    wrapper.update();
-    simulateKeyInput(wrapper.find('input'), '245sf6789', 0);
-    expect(wrapper.state().value).toEqual('2456 789_ ____ ____');
-
-    //case 5: Similiar to case 4 but a formatted value got added
-    wrapper.setProps({value: undefined});
-    wrapper.setProps({value: ''});
-    wrapper.update();
-    simulateKeyInput(wrapper.find('input'), '1234 56', 0);
-    expect(wrapper.state().value).toEqual('1234 56__ ____ ____');
-
-    //case 6: If format has numbers
-    wrapper.setProps({value: undefined});
-    wrapper.setProps({value: '', format: '+1 (###) ### # ##'});
-    wrapper.update();
-    simulateKeyInput(wrapper.find('input'), '123456', 0);
-    expect(wrapper.state().value).toEqual('+1 (123) 456 _ __');
-
-    //case 7: If format has numbers and and formatted value is inserted
-    wrapper.setProps({value: undefined});
-    wrapper.setProps({value: ''});
-    wrapper.update();
-    simulateKeyInput(wrapper.find('input'), '+1 (965) 432 1 19', 0);
-    expect(wrapper.state().value).toEqual('+1 (965) 432 1 19');
-  });
-
-  it('should handle addition of characters at a cursor position', () => {
-    const wrapper = shallow(<NumberFormat thousandSeparator={true} prefix={'$'} value="$12,345"/>);
-    let caretPos;
-    const setSelectionRange = (pos) => {
-      caretPos = pos;
-    }
-
-    simulateKeyInput(wrapper.find('input'), '8', 2, 2, setSelectionRange);
-    expect(wrapper.state().value).toEqual('$182,345');
-    expect(caretPos).toEqual(3);
-
-    simulateKeyInput(wrapper.find('input'), '67', 3, 3, setSelectionRange);
-    expect(wrapper.state().value).toEqual('$18,672,345');
-    expect(caretPos).toEqual(6);
-
-    wrapper.setProps({format: '### ### ###', value: '123 456 789'});
-    wrapper.update();
-    simulateKeyInput(wrapper.find('input'), '8', 3, 3, setSelectionRange);
-    expect(wrapper.state().value).toEqual('123 845 678');
-    expect(caretPos).toEqual(5);
-
-
-    simulateKeyInput(wrapper.find('input'), '999', 4, 4, setSelectionRange);
-    expect(wrapper.state().value).toEqual('123 999 845');
-    expect(caretPos).toEqual(7);
-  });
-
-})
-
-describe('Test delete/backspace with format pattern', () => {
-  const wrapper = shallow(<NumberFormat format="+1 (###) ### # ## US" value="+1 (123) 456 7 89 US"/>);
   let caretPos;
   const setSelectionRange = (pos) => {
     caretPos = pos;
@@ -109,268 +17,365 @@ describe('Test delete/backspace with format pattern', () => {
     persist.calls.reset();
   })
 
-  it('caret position should not change if its on starting of input area', () => {
-    simulateKeyInput(wrapper.find('input'), 'Backspace', 4, 4, setSelectionRange);
-    expect(wrapper.state().value).toEqual('+1 (123) 456 7 89 US');
-    expect(caretPos).toEqual(4);
-  });
-
-  it('caret position should not change if its on end of input area', () => {
-    simulateKeyInput(wrapper.find('input'), 'Delete', 17, 17, setSelectionRange);
-    expect(wrapper.state().value).toEqual('+1 (123) 456 7 89 US');
-    expect(caretPos).toEqual(17);
-  });
-
-  it('should only remove numbers only from input area in other case it should change the caret position', () => {
-    simulateKeyInput(wrapper.find('input'), 'Backspace', 10, 10, setSelectionRange);
-    expect(wrapper.state().value).toEqual('+1 (123) 567 8 9  US');
-    expect(caretPos).toEqual(9);
-
-    simulateKeyInput(wrapper.find('input'), 'Backspace', 9, 9, setSelectionRange);
-    expect(wrapper.state().value).toEqual('+1 (123) 567 8 9  US');
-    expect(caretPos).toEqual(7);
-
-    simulateKeyInput(wrapper.find('input'), 'Delete', 7, 7, setSelectionRange);
-    expect(wrapper.state().value).toEqual('+1 (123) 567 8 9  US');
-    expect(caretPos).toEqual(9);
-
-    simulateKeyInput(wrapper.find('input'), 'Delete', 9, 9, setSelectionRange);
-    expect(wrapper.state().value).toEqual('+1 (123) 678 9    US');
-    expect(caretPos).toEqual(9);
-  });
-})
-
-describe('Test delete/backspace with numeric format', () => {
-  const wrapper = shallow(<NumberFormat thousandSeparator="," prefix="Rs. " suffix=" /sq.feet" value="Rs. 12,345.50 /sq.feet"/>);
-  let caretPos;
-  const setSelectionRange = (pos) => {
-    caretPos = pos;
-  }
-
-  beforeEach(() => {
-    caretPos = 0;
-    persist.calls.reset();
-  })
+  it('should maintain caret position if suffix/prefix is updated while typing #249', () => {
+    class TestComp extends React.Component {
+      constructor() {
+        super();
+        this.state = {
+          prefix: '$',
+          value: '123',
+        }
+      }
+      render() {
+        const {value, prefix} = this.state;
+        return (
+          <NumberFormat isNumericString={true} prefix={prefix} value={value} onValueChange={({value}) => {
+            this.setState({value, prefix: value.length > 3 ? '$$' : '$'});
+          }}/>
+        )
+      }
+    }
 
-  it('should not remove prefix', () => {
-    simulateKeyInput(wrapper.find('input'), 'Backspace', 4, 4, setSelectionRange);
-    expect(wrapper.state().value).toEqual('Rs. 12,345.50 /sq.feet');
+    const wrapper = mount(<TestComp />);
+    simulateFocusEvent(wrapper.find('input'), 0, 0, setSelectionRange);
+    simulateKeyInput(wrapper.find('input'), '4', 2, 2, setSelectionRange);
+    expect(ReactDOM.findDOMNode(wrapper.instance()).value).toEqual('$$1423');
     expect(caretPos).toEqual(4);
-  });
-
-  it('should not remove suffix', () => {
-    simulateKeyInput(wrapper.find('input'), 'Delete', 13, 13, setSelectionRange);
-    expect(wrapper.state().value).toEqual('Rs. 12,345.50 /sq.feet');
-    expect(caretPos).toEqual(13);
-  });
-
-  it('should only remove number, in other case it should change caret position', () => {
-    simulateKeyInput(wrapper.find('input'), 'Backspace', 7, 7, setSelectionRange);
-    expect(wrapper.state().value).toEqual('Rs. 12,345.50 /sq.feet');
-    expect(caretPos).toEqual(6);
-
-    simulateKeyInput(wrapper.find('input'), 'Delete', 6, 6, setSelectionRange);
-    expect(wrapper.state().value).toEqual('Rs. 12,345.50 /sq.feet');
-    expect(caretPos).toEqual(7);
-
-    simulateKeyInput(wrapper.find('input'), 'Backspace', 8, 8, setSelectionRange);
-    expect(wrapper.state().value).toEqual('Rs. 1,245.50 /sq.feet');
-    expect(caretPos).toEqual(7);
-
-    simulateKeyInput(wrapper.find('input'), 'Delete', 7, 7, setSelectionRange);
-    expect(wrapper.state().value).toEqual('Rs. 125.50 /sq.feet');
-    expect(caretPos).toEqual(6);
-  });
-
-  it('should maintain correct caret positon while removing the last character and suffix is not defined. Issue #105', () => {
-    wrapper.setProps({
-      suffix: '',
-      prefix: '$',
-      value: '$2,342,343'
-    });
-    wrapper.update();
-    simulateKeyInput(wrapper.find('input'), 'Backspace', 10, 10, setSelectionRange);
-    expect(wrapper.state().value).toEqual('$234,234');
-    expect(caretPos).toEqual(8);
-  });
-
-  it('should maintain correct caret position while removing the second last character and suffix is not defined, Issue #116', () => {
-    wrapper.setProps({
-      suffix: '',
-      prefix: '',
-      value: '1,000'
-    });
-
-    wrapper.update();
 
     simulateKeyInput(wrapper.find('input'), 'Backspace', 4, 4, setSelectionRange);
-    expect(wrapper.state().value).toEqual('100');
+    expect(ReactDOM.findDOMNode(wrapper.instance()).value).toEqual('$123');
     expect(caretPos).toEqual(2);
   });
 
-  it('should allow removing negation(-), even if its before suffix', () => {
-    const spy = jasmine.createSpy();
-    wrapper.setProps({
-      suffix: '',
-      prefix: '$',
-      value: '-$1,000',
-      onValueChange: spy
+  describe('Test character insertion', () => {
+    it('should add any number properly when input is empty without format prop passed', () => {
+      const wrapper = shallow(<NumberFormat thousandSeparator={true} prefix={'$'}/>);
+  
+      simulateKeyInput(wrapper.find('input'), '1', 0);
+  
+      expect(wrapper.state().value).toEqual('$1');
+  
+      wrapper.setProps({value: ''});
+      wrapper.update();
+  
+      simulateKeyInput(wrapper.find('input'), '2456789', 0);
+  
+      expect(wrapper.state().value).toEqual('$2,456,789');
     });
-    wrapper.update();
-
-    simulateKeyInput(wrapper.find('input'), 'Backspace', 2, 2, setSelectionRange);
-    expect(wrapper.state().value).toEqual('$1,000');
-    expect(caretPos).toEqual(1);
-    expect(spy).toHaveBeenCalled();
-    expect(persist).toHaveBeenCalledWith('keydown');
-  });
-})
-
-describe('Test arrow keys', () => {
-  let caretPos;
-  const setSelectionRange = (pos) => {
-    caretPos = pos;
-  }
-
-  beforeEach(() => {
-    caretPos = 0;
-  })
-
-  it('should keep caret position between the prefix and suffix', () => {
-    const wrapper = shallow(<NumberFormat thousandSeparator="," prefix="Rs. " suffix=" /sq.feet" value="Rs. 12,345.50 /sq.feet"/>);
-    simulateKeyInput(wrapper.find('input'), 'ArrowLeft', 4, 4, setSelectionRange);
-    expect(caretPos).toEqual(4);
-
-    simulateKeyInput(wrapper.find('input'), 'ArrowRight', 13, 13, setSelectionRange);
-    expect(caretPos).toEqual(13);
+  
+    it('should add any number properly when input is empty with format prop passed', () => {
+      //case 1: Enter first number
+      const wrapper = shallow(<NumberFormat format="#### #### #### ####" mask="_"/>);
+      simulateKeyInput(wrapper.find('input'), '1', 0);
+      expect(wrapper.state().value).toEqual('1___ ____ ____ ____');
+  
+      //case 2: if nun numeric character got added
+      wrapper.setProps({value: ''});
+      wrapper.update();
+      simulateKeyInput(wrapper.find('input'), 'b', 0);
+      expect(wrapper.state().value).toEqual('');
+  
+      //case 3: Enter first multiple number
+      wrapper.setProps({value: undefined});
+      wrapper.setProps({value: ''});
+      wrapper.update();
+      simulateKeyInput(wrapper.find('input'), '2456789', 0);
+      expect(wrapper.state().value).toEqual('2456 789_ ____ ____');
+  
+      //case 4: When alpha numeric character got added
+      wrapper.setProps({value: undefined});
+      wrapper.setProps({value: ''});
+      wrapper.update();
+      simulateKeyInput(wrapper.find('input'), '245sf6789', 0);
+      expect(wrapper.state().value).toEqual('2456 789_ ____ ____');
+  
+      //case 5: Similiar to case 4 but a formatted value got added
+      wrapper.setProps({value: undefined});
+      wrapper.setProps({value: ''});
+      wrapper.update();
+      simulateKeyInput(wrapper.find('input'), '1234 56', 0);
+      expect(wrapper.state().value).toEqual('1234 56__ ____ ____');
+  
+      //case 6: If format has numbers
+      wrapper.setProps({value: undefined});
+      wrapper.setProps({value: '', format: '+1 (###) ### # ##'});
+      wrapper.update();
+      simulateKeyInput(wrapper.find('input'), '123456', 0);
+      expect(wrapper.state().value).toEqual('+1 (123) 456 _ __');
+  
+      //case 7: If format has numbers and and formatted value is inserted
+      wrapper.setProps({value: undefined});
+      wrapper.setProps({value: ''});
+      wrapper.update();
+      simulateKeyInput(wrapper.find('input'), '+1 (965) 432 1 19', 0);
+      expect(wrapper.state().value).toEqual('+1 (965) 432 1 19');
+    });
+  
+    it('should handle addition of characters at a cursor position', () => {
+      const wrapper = shallow(<NumberFormat thousandSeparator={true} prefix={'$'} value="$12,345"/>);
+  
+      simulateKeyInput(wrapper.find('input'), '8', 2, 2, setSelectionRange);
+      expect(wrapper.state().value).toEqual('$182,345');
+      expect(caretPos).toEqual(3);
+  
+      simulateKeyInput(wrapper.find('input'), '67', 3, 3, setSelectionRange);
+      expect(wrapper.state().value).toEqual('$18,672,345');
+      expect(caretPos).toEqual(6);
+  
+      wrapper.setProps({format: '### ### ###', value: '123 456 789'});
+      wrapper.update();
+      simulateKeyInput(wrapper.find('input'), '8', 3, 3, setSelectionRange);
+      expect(wrapper.state().value).toEqual('123 845 678');
+      expect(caretPos).toEqual(5);
+  
+  
+      simulateKeyInput(wrapper.find('input'), '999', 4, 4, setSelectionRange);
+      expect(wrapper.state().value).toEqual('123 999 845');
+      expect(caretPos).toEqual(7);
+    });
+  
   })
-
-  it('should keep caret position within typable area', () => {
-    const wrapper = shallow(<NumberFormat  format="+1 (###) ### # ## US" value="+1 (123) 456 7 89 US"/>);
-    simulateKeyInput(wrapper.find('input'), 'ArrowLeft', 4, 4, setSelectionRange);
-    expect(caretPos).toEqual(4);
-
-    simulateKeyInput(wrapper.find('input'), 'ArrowRight', 17, 17, setSelectionRange);
-    expect(caretPos).toEqual(17);
-
-    simulateKeyInput(wrapper.find('input'), 'ArrowRight', 7, 7, setSelectionRange);
-    expect(caretPos).toEqual(9);
-
-    simulateKeyInput(wrapper.find('input'), 'ArrowLeft', 9, 9, setSelectionRange);
-    expect(caretPos).toEqual(7);
-
-    caretPos = undefined;
-    simulateKeyInput(wrapper.find('input'), 'ArrowRight', 12, 12, setSelectionRange);
-    expect(caretPos).toEqual(13);
-
-    caretPos = undefined;
-    simulateKeyInput(wrapper.find('input'), 'ArrowLeft', 13, 13, setSelectionRange);
-    expect(caretPos).toEqual(12);
-  });
-
-  it('should not move caret positon from left most to right most if left key pressed. #154', () => {
-    const wrapper = shallow(<NumberFormat format={cardExpiry} value="11/11"/>);
-    caretPos = undefined;
-    simulateKeyInput(wrapper.find('input'), 'ArrowLeft', 0, 0, setSelectionRange);
-    expect(caretPos).toEqual(0);
-  });
-})
-
-describe('Test click / focus on input', () => {
-  let caretPos;
-  const setSelectionRange = (pos) => {
-    caretPos = pos;
-  }
-
-  beforeEach(() => {
-    caretPos = 0;
-    persist.calls.reset();
+  
+  describe('Test delete/backspace with format pattern', () => {
+    const wrapper = shallow(<NumberFormat format="+1 (###) ### # ## US" value="+1 (123) 456 7 89 US"/>);
+  
+    it('caret position should not change if its on starting of input area', () => {
+      simulateKeyInput(wrapper.find('input'), 'Backspace', 4, 4, setSelectionRange);
+      expect(wrapper.state().value).toEqual('+1 (123) 456 7 89 US');
+      expect(caretPos).toEqual(4);
+    });
+  
+    it('caret position should not change if its on end of input area', () => {
+      simulateKeyInput(wrapper.find('input'), 'Delete', 17, 17, setSelectionRange);
+      expect(wrapper.state().value).toEqual('+1 (123) 456 7 89 US');
+      expect(caretPos).toEqual(17);
+    });
+  
+    it('should only remove numbers only from input area in other case it should change the caret position', () => {
+      simulateKeyInput(wrapper.find('input'), 'Backspace', 10, 10, setSelectionRange);
+      expect(wrapper.state().value).toEqual('+1 (123) 567 8 9  US');
+      expect(caretPos).toEqual(9);
+  
+      simulateKeyInput(wrapper.find('input'), 'Backspace', 9, 9, setSelectionRange);
+      expect(wrapper.state().value).toEqual('+1 (123) 567 8 9  US');
+      expect(caretPos).toEqual(7);
+  
+      simulateKeyInput(wrapper.find('input'), 'Delete', 7, 7, setSelectionRange);
+      expect(wrapper.state().value).toEqual('+1 (123) 567 8 9  US');
+      expect(caretPos).toEqual(9);
+  
+      simulateKeyInput(wrapper.find('input'), 'Delete', 9, 9, setSelectionRange);
+      expect(wrapper.state().value).toEqual('+1 (123) 678 9    US');
+      expect(caretPos).toEqual(9);
+    });
   })
-
-  it('should always keep caret on typable area when we click on the input', () => {
-    const wrapper = shallow(<NumberFormat  format="+1 (###) ### # ## US" value="+1 (123) 456 7 89 US"/>);
-
-    simulateMousUpEvent(wrapper.find('input'), 0, setSelectionRange);
-    expect(caretPos).toEqual(4);
-
-    simulateMousUpEvent(wrapper.find('input'), 8, setSelectionRange);
-    expect([7, 9]).toContain(caretPos);
-
-    simulateMousUpEvent(wrapper.find('input'), 19, setSelectionRange);
-    expect(caretPos).toEqual(17);
+  
+  describe('Test delete/backspace with numeric format', () => {
+    const wrapper = shallow(<NumberFormat thousandSeparator="," prefix="Rs. " suffix=" /sq.feet" value="Rs. 12,345.50 /sq.feet"/>);
+  
+    it('should not remove prefix', () => {
+      simulateKeyInput(wrapper.find('input'), 'Backspace', 4, 4, setSelectionRange);
+      expect(wrapper.state().value).toEqual('Rs. 12,345.50 /sq.feet');
+      expect(caretPos).toEqual(4);
+    });
+  
+    it('should not remove suffix', () => {
+      simulateKeyInput(wrapper.find('input'), 'Delete', 13, 13, setSelectionRange);
+      expect(wrapper.state().value).toEqual('Rs. 12,345.50 /sq.feet');
+      expect(caretPos).toEqual(13);
+    });
+  
+    it('should only remove number, in other case it should change caret position', () => {
+      simulateKeyInput(wrapper.find('input'), 'Backspace', 7, 7, setSelectionRange);
+      expect(wrapper.state().value).toEqual('Rs. 12,345.50 /sq.feet');
+      expect(caretPos).toEqual(6);
+  
+      simulateKeyInput(wrapper.find('input'), 'Delete', 6, 6, setSelectionRange);
+      expect(wrapper.state().value).toEqual('Rs. 12,345.50 /sq.feet');
+      expect(caretPos).toEqual(7);
+  
+      simulateKeyInput(wrapper.find('input'), 'Backspace', 8, 8, setSelectionRange);
+      expect(wrapper.state().value).toEqual('Rs. 1,245.50 /sq.feet');
+      expect(caretPos).toEqual(7);
+  
+      simulateKeyInput(wrapper.find('input'), 'Delete', 7, 7, setSelectionRange);
+      expect(wrapper.state().value).toEqual('Rs. 125.50 /sq.feet');
+      expect(caretPos).toEqual(6);
+    });
+  
+    it('should maintain correct caret positon while removing the last character and suffix is not defined. Issue #105', () => {
+      wrapper.setProps({
+        suffix: '',
+        prefix: '$',
+        value: '$2,342,343'
+      });
+      wrapper.update();
+      simulateKeyInput(wrapper.find('input'), 'Backspace', 10, 10, setSelectionRange);
+      expect(wrapper.state().value).toEqual('$234,234');
+      expect(caretPos).toEqual(8);
+    });
+  
+    it('should maintain correct caret position while removing the second last character and suffix is not defined, Issue #116', () => {
+      wrapper.setProps({
+        suffix: '',
+        prefix: '',
+        value: '1,000'
+      });
+  
+      wrapper.update();
+  
+      simulateKeyInput(wrapper.find('input'), 'Backspace', 4, 4, setSelectionRange);
+      expect(wrapper.state().value).toEqual('100');
+      expect(caretPos).toEqual(2);
+    });
+  
+    it('should allow removing negation(-), even if its before suffix', () => {
+      const spy = jasmine.createSpy();
+      wrapper.setProps({
+        suffix: '',
+        prefix: '$',
+        value: '-$1,000',
+        onValueChange: spy
+      });
+      wrapper.update();
+  
+      simulateKeyInput(wrapper.find('input'), 'Backspace', 2, 2, setSelectionRange);
+      expect(wrapper.state().value).toEqual('$1,000');
+      expect(caretPos).toEqual(1);
+      expect(spy).toHaveBeenCalled();
+      expect(persist).toHaveBeenCalledWith('keydown');
+    });
   })
-
-  it('should limit the caret position to the next position of the typed number', () => {
-    const wrapper = shallow(<NumberFormat format="##/##/####"/>);
-
-    simulateKeyInput(wrapper.find('input'), '1', 0);
-    expect(wrapper.state().value).toEqual('1 /  /    ');
-
-    simulateMousUpEvent(wrapper.find('input'), 4, setSelectionRange);
-    expect(caretPos).toEqual(1);
-
-    wrapper.setProps({
-      mask: ['D', 'D', 'M', 'M', 'Y', 'Y', 'Y', 'Y']
+  
+  describe('Test arrow keys', () => {
+
+    it('should keep caret position between the prefix and suffix', () => {
+      const wrapper = shallow(<NumberFormat thousandSeparator="," prefix="Rs. " suffix=" /sq.feet" value="Rs. 12,345.50 /sq.feet"/>);
+      simulateKeyInput(wrapper.find('input'), 'ArrowLeft', 4, 4, setSelectionRange);
+      expect(caretPos).toEqual(4);
+  
+      simulateKeyInput(wrapper.find('input'), 'ArrowRight', 13, 13, setSelectionRange);
+      expect(caretPos).toEqual(13);
     })
-    wrapper.update();
-
-    expect(wrapper.state().value).toEqual('1D/MM/YYYY');
-    simulateMousUpEvent(wrapper.find('input'), 4, setSelectionRange);
-    expect(caretPos).toEqual(1);
-  })
-
-  it('should always keep caret position between suffix and prefix', () => {
-    const wrapper = shallow(<NumberFormat  thousandSeparator="," prefix="Rs. " suffix=" /sq.feet" value="Rs. 12,345.50 /sq.feet"/>);
-
-    simulateMousUpEvent(wrapper.find('input'), 0, setSelectionRange);
-    expect(caretPos).toEqual(4);
-
-    simulateMousUpEvent(wrapper.find('input'), 17, setSelectionRange);
-    expect(caretPos).toEqual(13);
-  })
-
-  it('should correct wrong caret position on focus', () => {
-    jasmine.clock().install()
-    const wrapper = shallow(<NumberFormat  thousandSeparator="," prefix="Rs. " suffix=" /sq.feet" value="Rs. 12,345.50 /sq.feet"/>);
-
-    simulateFocusEvent(wrapper.find('input'), 0, 0, setSelectionRange);
-    jasmine.clock().tick(1)
-    expect(caretPos).toEqual(4)
-    jasmine.clock().uninstall()
-  });
-
-  it('should correct wrong caret positon on focus when allowEmptyFormatting is set', () => {
-    jasmine.clock().install()
-    const format = '+1 (###) ### # ## US';
-    const wrapper = shallow(<NumberFormat format="+1 (###) ### # ## US" allowEmptyFormatting={true} value="" mask="_"/>);
-
-    simulateFocusEvent(wrapper.find('input'), 1, 1, setSelectionRange);
-    jasmine.clock().tick(1)
-    expect(caretPos).toEqual(4)
-    jasmine.clock().uninstall()
+  
+    it('should keep caret position within typable area', () => {
+      const wrapper = shallow(<NumberFormat  format="+1 (###) ### # ## US" value="+1 (123) 456 7 89 US"/>);
+      simulateKeyInput(wrapper.find('input'), 'ArrowLeft', 4, 4, setSelectionRange);
+      expect(caretPos).toEqual(4);
+  
+      simulateKeyInput(wrapper.find('input'), 'ArrowRight', 17, 17, setSelectionRange);
+      expect(caretPos).toEqual(17);
+  
+      simulateKeyInput(wrapper.find('input'), 'ArrowRight', 7, 7, setSelectionRange);
+      expect(caretPos).toEqual(9);
+  
+      simulateKeyInput(wrapper.find('input'), 'ArrowLeft', 9, 9, setSelectionRange);
+      expect(caretPos).toEqual(7);
+  
+      caretPos = undefined;
+      simulateKeyInput(wrapper.find('input'), 'ArrowRight', 12, 12, setSelectionRange);
+      expect(caretPos).toEqual(13);
+  
+      caretPos = undefined;
+      simulateKeyInput(wrapper.find('input'), 'ArrowLeft', 13, 13, setSelectionRange);
+      expect(caretPos).toEqual(12);
+    });
+  
+    it('should not move caret positon from left most to right most if left key pressed. #154', () => {
+      const wrapper = shallow(<NumberFormat format={cardExpiry} value="11/11"/>);
+      caretPos = undefined;
+      simulateKeyInput(wrapper.find('input'), 'ArrowLeft', 0, 0, setSelectionRange);
+      expect(caretPos).toEqual(0);
+    });
   })
-
-  it('should not reset correct caret position on focus', () => {
-    jasmine.clock().install()
-    const wrapper = shallow(<NumberFormat  thousandSeparator="," prefix="Rs. " suffix=" /sq.feet" value="Rs. 12,345.50 /sq.feet"/>);
-
-    // Note: init caretPos to `6`. Focus to `6`. In case of bug, selectionStart is `0` and the caret will move to `4`.
-    //   otherwise (correct behaviour) the value will not change, and stay `6`
-    caretPos = 6
-    simulateFocusEvent(wrapper.find('input'), 6, 6, setSelectionRange);
-    jasmine.clock().tick(1)
-    expect(caretPos).toEqual(6)
-    jasmine.clock().uninstall()
+  
+  describe('Test click / focus on input', () => {
+
+    it('should always keep caret on typable area when we click on the input', () => {
+      const wrapper = shallow(<NumberFormat  format="+1 (###) ### # ## US" value="+1 (123) 456 7 89 US"/>);
+  
+      simulateMousUpEvent(wrapper.find('input'), 0, setSelectionRange);
+      expect(caretPos).toEqual(4);
+  
+      simulateMousUpEvent(wrapper.find('input'), 8, setSelectionRange);
+      expect([7, 9]).toContain(caretPos);
+  
+      simulateMousUpEvent(wrapper.find('input'), 19, setSelectionRange);
+      expect(caretPos).toEqual(17);
+    })
+  
+    it('should limit the caret position to the next position of the typed number', () => {
+      const wrapper = shallow(<NumberFormat format="##/##/####"/>);
+  
+      simulateKeyInput(wrapper.find('input'), '1', 0);
+      expect(wrapper.state().value).toEqual('1 /  /    ');
+  
+      simulateMousUpEvent(wrapper.find('input'), 4, setSelectionRange);
+      expect(caretPos).toEqual(1);
+  
+      wrapper.setProps({
+        mask: ['D', 'D', 'M', 'M', 'Y', 'Y', 'Y', 'Y']
+      })
+      wrapper.update();
+  
+      expect(wrapper.state().value).toEqual('1D/MM/YYYY');
+      simulateMousUpEvent(wrapper.find('input'), 4, setSelectionRange);
+      expect(caretPos).toEqual(1);
+    })
+  
+    it('should always keep caret position between suffix and prefix', () => {
+      const wrapper = shallow(<NumberFormat  thousandSeparator="," prefix="Rs. " suffix=" /sq.feet" value="Rs. 12,345.50 /sq.feet"/>);
+  
+      simulateMousUpEvent(wrapper.find('input'), 0, setSelectionRange);
+      expect(caretPos).toEqual(4);
+  
+      simulateMousUpEvent(wrapper.find('input'), 17, setSelectionRange);
+      expect(caretPos).toEqual(13);
+    })
+  
+    it('should correct wrong caret position on focus', () => {
+      jasmine.clock().install()
+      const wrapper = shallow(<NumberFormat  thousandSeparator="," prefix="Rs. " suffix=" /sq.feet" value="Rs. 12,345.50 /sq.feet"/>);
+  
+      simulateFocusEvent(wrapper.find('input'), 0, 0, setSelectionRange);
+      jasmine.clock().tick(1)
+      expect(caretPos).toEqual(4)
+      jasmine.clock().uninstall()
+    });
+  
+    it('should correct wrong caret positon on focus when allowEmptyFormatting is set', () => {
+      jasmine.clock().install()
+      const wrapper = shallow(<NumberFormat format="+1 (###) ### # ## US" allowEmptyFormatting={true} value="" mask="_"/>);
+  
+      simulateFocusEvent(wrapper.find('input'), 1, 1, setSelectionRange);
+      jasmine.clock().tick(1)
+      expect(caretPos).toEqual(4)
+      jasmine.clock().uninstall()
+    })
+  
+    it('should not reset correct caret position on focus', () => {
+      jasmine.clock().install()
+      const wrapper = shallow(<NumberFormat  thousandSeparator="," prefix="Rs. " suffix=" /sq.feet" value="Rs. 12,345.50 /sq.feet"/>);
+  
+      // Note: init caretPos to `6`. Focus to `6`. In case of bug, selectionStart is `0` and the caret will move to `4`.
+      //   otherwise (correct behaviour) the value will not change, and stay `6`
+      caretPos = 6
+      simulateFocusEvent(wrapper.find('input'), 6, 6, setSelectionRange);
+      jasmine.clock().tick(1)
+      expect(caretPos).toEqual(6)
+      jasmine.clock().uninstall()
+    });
+  
+    it('should not reset caret position on focus when full value is selected', () => {
+      jasmine.clock().install();
+      const value = "Rs. 12,345.50 /sq.feet";
+      const wrapper = shallow(<NumberFormat  thousandSeparator="," prefix="Rs. " suffix=" /sq.feet" value={value}/>);
+  
+      simulateFocusEvent(wrapper.find('input'), 0, value.length, setSelectionRange);
+      jasmine.clock().tick(1);
+      expect(caretPos).toEqual(0);
+    });
   });
+})
 
-  it('should not reset caret position on focus when full value is selected', () => {
-    jasmine.clock().install();
-    const value = "Rs. 12,345.50 /sq.feet";
-    const wrapper = shallow(<NumberFormat  thousandSeparator="," prefix="Rs. " suffix=" /sq.feet" value={value}/>);
-
-    simulateFocusEvent(wrapper.find('input'), 0, value.length, setSelectionRange);
-    jasmine.clock().tick(1);
-    expect(caretPos).toEqual(0);
-  });
 
-});
diff --git a/test/test_util.js b/test/test_util.js
index 7bedb208..1d0d4c58 100644
--- a/test/test_util.js
+++ b/test/test_util.js
@@ -7,6 +7,9 @@ const noop = function(){};
 
 export const persist = jasmine.createSpy();
 
+//keep input element singleton
+const target = document.createElement('input');
+
 export function getCustomEvent(value, selectionStart, selectionEnd) {
   let event =  new Event('custom');
   const el = document.createElement('input');
@@ -20,13 +23,12 @@ export function getCustomEvent(value, selectionStart, selectionEnd) {
 
 function getEvent(eventProps, targetProps) {
   let event =  new Event('custom');
-  const el = document.createElement('input');
 
   Object.keys(targetProps).forEach((key) => {
-    el[key] = targetProps[key];
-  })
+    target[key] = targetProps[key];
+  });
 
-  event = {...event, ...eventProps, target: el};
+  event = {...event, ...eventProps, target};
 
   return event;
 }