react-input-mask - npm Package Compare versions

Comparing version 0.7.2 to 0.7.3

build/InputElement.js

@@ -390,3 +390,3 @@ // https://github.com/sanniassin/react-input-mask
                 } else {
-                    lastEditablePos = str.length;
+                    lastEditablePos = str.length + 1;
                 }
@@ -483,2 +483,5 @@ str += character;
         }
+        if (this.valueDescriptor && this.getInputValue() !== this.state.value) {
+            this.getInputDOMNode().value = this.state.value;
+        }
     },
@@ -631,3 +634,3 @@ updateUncontrolledInput: function () {
 
-            if (startPos < maskLen && (substrLen !== 1 || enteredSubstr !== mask[startPos])) {
+            if (startPos < lastEditablePos && (substrLen !== 1 || enteredSubstr !== mask[startPos])) {
                 caretPos = this.getRightEditablePos(startPos);
@@ -675,14 +678,14 @@ } else {
             target.value = value;
+        }
 
-            if (value && !this.getInputValue()) {
-                if (this.isAndroidFirefox) {
-                    this.value = value;
-                    this.enableValueAccessors();
-                }
+        if (this.isAndroidFirefox && value && !this.getInputValue() || this.isAndroidBrowser || this.isWindowsPhoneBrowser) {
+            this.value = value;
+            this.enableValueAccessors();
+            if (this.isAndroidFirefox) {
                 this.preventEmptyChange = true;
-                setTimeout(function () {
-                    _this6.preventEmptyChange = false;
-                    _this6.disableValueAccessors();
-                }, 0);
             }
+            setTimeout(function () {
+                _this6.preventEmptyChange = false;
+                _this6.disableValueAccessors();
+            }, 0);
         }
@@ -703,9 +706,14 @@
             var value = this.formatValue(prefix);
-            event.target.value = this.formatValue(value);
+            var inputValue = this.formatValue(value);
+            var isInputValueChanged = inputValue !== event.target.value;
 
+            if (isInputValueChanged) {
+                event.target.value = inputValue;
+            }
+
             this.setState({
-                value: this.hasValue ? this.state.value : value
+                value: this.hasValue ? this.state.value : inputValue
             }, this.setCaretToEnd);
 
-            if (typeof this.props.onChange === "function") {
+            if (isInputValueChanged && typeof this.props.onChange === "function") {
                 this.props.onChange(event);
@@ -723,7 +731,11 @@ }
         if (!this.props.alwaysShowMask && this.isEmpty(this.state.value)) {
-            event.target.value = "";
+            var inputValue = "";
+            var isInputValueChanged = inputValue !== event.target.value;
+            if (isInputValueChanged) {
+                event.target.value = inputValue;
+            }
             this.setState({
                 value: this.hasValue ? this.state.value : ""
             });
-            if (typeof this.props.onChange === "function") {
+            if (isInputValueChanged && typeof this.props.onChange === "function") {
                 this.props.onChange(event);
@@ -799,9 +811,4 @@ }
 
-        var componentKeys = ["mask", "alwaysShowMask", "maskChar", "formatChars"];
         if (this.mask) {
             var handlersKeys = ["onFocus", "onBlur", "onChange", "onKeyDown", "onKeyPress", "onPaste"];
-            props = _extends({}, props);
-            componentKeys.forEach(function (key) {
-                delete props[key];
-            });
             handlersKeys.forEach(function (key) {
@@ -808,0 +815,0 @@ props[key] = _this7[key];

InputElement.js

@@ -377,3 +377,3 @@ // https://github.com/sanniassin/react-input-mask
                 else {
-                    lastEditablePos = str.length;
+                    lastEditablePos = str.length + 1;
                 }
@@ -475,2 +475,5 @@ str += character;
         }
+        if (this.valueDescriptor && this.getInputValue() !== this.state.value) {
+            this.getInputDOMNode().value = this.state.value;
+        }
     },
@@ -617,3 +620,3 @@ updateUncontrolledInput: function() {
 
-            if (startPos < maskLen && (substrLen !== 1 || enteredSubstr !== mask[startPos])) {
+            if (startPos < lastEditablePos && (substrLen !== 1 || enteredSubstr !== mask[startPos])) {
                 caretPos = this.getRightEditablePos(startPos);
@@ -632,3 +635,3 @@ }
 
-            if (substrLen !== 1 || caretPos >= prefixLen && caretPos < lastEditablePos) {
+            if (substrLen !== 1 || (caretPos >= prefixLen && caretPos < lastEditablePos)) {
                 caretPos = this.getFilledLength(clearedValue);
@@ -666,14 +669,14 @@ }
             target.value = value;
+        }
 
-            if (value && !this.getInputValue()) {
-                if (this.isAndroidFirefox) {
-                    this.value = value;
-                    this.enableValueAccessors();
-                }
+        if ((this.isAndroidFirefox && value && !this.getInputValue()) || this.isAndroidBrowser || this.isWindowsPhoneBrowser) {
+            this.value = value;
+            this.enableValueAccessors();
+            if (this.isAndroidFirefox) {
                 this.preventEmptyChange = true;
-                setTimeout(() => {
-                    this.preventEmptyChange = false;
-                    this.disableValueAccessors();
-                }, 0);
             }
+            setTimeout(() => {
+                this.preventEmptyChange = false;
+                this.disableValueAccessors();
+            }, 0);
         }
@@ -694,9 +697,14 @@
             var value = this.formatValue(prefix);
-            event.target.value = this.formatValue(value);
+            var inputValue = this.formatValue(value);
+            var isInputValueChanged = inputValue !== event.target.value;
 
+            if (isInputValueChanged) {
+                event.target.value = inputValue;
+            }
+
             this.setState({
-                value: this.hasValue ? this.state.value : value
+                value: this.hasValue ? this.state.value : inputValue
             }, this.setCaretToEnd);
 
-            if (typeof this.props.onChange === "function") {
+            if (isInputValueChanged && typeof this.props.onChange === "function") {
                 this.props.onChange(event);
@@ -715,7 +723,11 @@ }
         if (!this.props.alwaysShowMask && this.isEmpty(this.state.value)) {
-            event.target.value = "";
+            var inputValue = "";
+            var isInputValueChanged = inputValue !== event.target.value;
+            if (isInputValueChanged) {
+                event.target.value = inputValue;
+            }
             this.setState({
                 value: this.hasValue ? this.state.value : ""
             });
-            if (typeof this.props.onChange === "function") {
+            if (isInputValueChanged && typeof this.props.onChange === "function") {
                 this.props.onChange(event);
@@ -782,10 +794,4 @@ }
         var { mask, alwaysShowMask, maskChar, formatChars, ...props } = this.props;
-        
-        var componentKeys = ["mask", "alwaysShowMask", "maskChar", "formatChars"];
         if (this.mask) {
             var handlersKeys = ["onFocus", "onBlur", "onChange", "onKeyDown", "onKeyPress", "onPaste"];
-            props = {...props};
-            componentKeys.forEach((key) => {
-                delete props[key];
-            });
             handlersKeys.forEach((key) => {
@@ -792,0 +798,0 @@ props[key] = this[key];

package.json

 {
   "name": "react-input-mask",
   "description": "Masked input component for React",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "homepage": "https://github.com/sanniassin/react-input-mask",
@@ -6,0 +6,0 @@ "license": "MIT",

README.md

@@ -52,1 +52,4 @@ # react-input-mask
 Screen keyboard backspace may not work in Android 4.x browser due to broken input events.
+
+## Thanks
+Thanks to [BrowserStack](https://www.browserstack.com/) for help with testing on real devices

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

161725

increased by0.52%

Lines of code

3932

increased by0.31%

Number of lines in readme file

55

increased by5.77%

No dependency changes