react-input-mask - npm Package Compare versions

Comparing version 0.5.7 to 0.5.8

build/InputElement.js

@@ -171,3 +171,9 @@ // https://github.com/sanniassin/react-input-mask
         var isFilled = this.isFilled(value);
+        var prefixLen = this.getPrefix().length;
         substr = substr.split("");
+
+        if (!maskChar && pos > value.length) {
+            value += mask.slice(value.length, pos);
+        }
+
         for (var i = pos; i < mask.length && substr.length;) {
@@ -178,3 +184,3 @@ if (!this.isPermanentChar(i) || mask[i] === substr[0]) {
                     if (i < value.length) {
-                        if (maskChar || isFilled) {
+                        if (maskChar || isFilled || i < prefixLen) {
                             value = this.replaceSubstr(value, char, i);
@@ -461,3 +467,3 @@ } else {
             if (editablePos !== null && this.isAllowedChar(key, editablePos)) {
-                value = this.insertRawSubstr(value, key, caretPos);
+                value = this.insertRawSubstr(value, key, editablePos);
                 caretPos = editablePos + 1;
@@ -477,4 +483,4 @@ }
         event.preventDefault();
-        while (caretPos > prefixLen && this.isPermanentChar(caretPos)) {
-            ++caretPos;
+        if (caretPos < maskLen && caretPos > prefixLen) {
+            caretPos = this.getRightEditablePos(caretPos);
         }
@@ -485,2 +491,4 @@ this.setCaretPos(caretPos);
         var pasteSelection = this.pasteSelection;
+        var mask = this.mask;
+        var maskChar = this.maskChar;
 
@@ -497,6 +505,6 @@ var target = event.target;
         var caretPos = selection.end;
-        var maskLen = this.mask.length;
-        var maskChar = this.maskChar;
+        var maskLen = mask.length;
         var valueLen = value.length;
         var oldValueLen = oldValue.length;
+        var prefixLen = this.getPrefix().length;
 
@@ -508,10 +516,20 @@ if (valueLen > oldValueLen) {
 
+            if (substrLen !== 1 || enteredSubstr !== mask[startPos]) {
+                caretPos = this.getRightEditablePos(startPos);
+            } else {
+                caretPos = startPos;
+            }
+
             value = value.substr(0, startPos) + value.substr(startPos + substrLen);
 
             var clearedValue = this.clearRange(value, startPos, maskLen - startPos);
-            clearedValue = this.insertRawSubstr(clearedValue, enteredSubstr, startPos);
+            clearedValue = this.insertRawSubstr(clearedValue, enteredSubstr, caretPos);
 
-            value = this.insertRawSubstr(oldValue, enteredSubstr, startPos);
+            value = this.insertRawSubstr(oldValue, enteredSubstr, caretPos);
 
-            caretPos = this.getFilledLength(clearedValue);
+            if (substrLen !== 1 || caretPos >= prefixLen && caretPos < maskLen) {
+                caretPos = this.getFilledLength(clearedValue);
+            } else if (caretPos < maskLen) {
+                caretPos++;
+            }
         } else if (maskChar && valueLen < maskLen) {
@@ -518,0 +536,0 @@ var removedLen = maskLen - valueLen;

InputElement.js

@@ -156,3 +156,9 @@ // https://github.com/sanniassin/react-input-mask
         var isFilled = this.isFilled(value);
+        var prefixLen = this.getPrefix().length;
         substr = substr.split("");
+
+        if (!maskChar && pos > value.length) {
+            value += mask.slice(value.length, pos);
+        }
+
         for (var i = pos; i < mask.length && substr.length; ) {
@@ -163,3 +169,3 @@ if (!this.isPermanentChar(i) || mask[i] === substr[0]) {
                     if (i < value.length) {
-                        if (maskChar || isFilled) {
+                        if (maskChar || isFilled || i < prefixLen) {
                             value = this.replaceSubstr(value, char, i);
@@ -456,3 +462,3 @@ }
             if (editablePos !== null && this.isAllowedChar(key, editablePos)) {
-                value = this.insertRawSubstr(value, key, caretPos);
+                value = this.insertRawSubstr(value, key, editablePos);
                 caretPos = editablePos + 1;
@@ -472,4 +478,4 @@ }
         event.preventDefault();
-        while (caretPos > prefixLen && this.isPermanentChar(caretPos)) {
-            ++caretPos;
+        if (caretPos < maskLen && caretPos > prefixLen) {
+            caretPos = this.getRightEditablePos(caretPos);
         }
@@ -479,3 +485,3 @@ this.setCaretPos(caretPos);
     onChange: function(event) {
-        var { pasteSelection } = this;
+        var { pasteSelection, mask, maskChar } = this;
         var target = event.target;
@@ -491,6 +497,6 @@ var value = target.value;
         var caretPos = selection.end;
-        var maskLen = this.mask.length;
-        var maskChar = this.maskChar;
+        var maskLen = mask.length;
         var valueLen = value.length;
         var oldValueLen = oldValue.length
+        var prefixLen = this.getPrefix().length;
 
@@ -502,10 +508,22 @@ if (valueLen > oldValueLen) {
 
+            if (substrLen !== 1 || enteredSubstr !== mask[startPos]) {
+                caretPos = this.getRightEditablePos(startPos);
+            }
+            else {
+                caretPos = startPos;
+            }
+
             value = value.substr(0, startPos) + value.substr(startPos + substrLen);
 
             var clearedValue = this.clearRange(value, startPos, maskLen - startPos);
-            clearedValue = this.insertRawSubstr(clearedValue, enteredSubstr, startPos);
+            clearedValue = this.insertRawSubstr(clearedValue, enteredSubstr, caretPos);
 
-            value = this.insertRawSubstr(oldValue, enteredSubstr, startPos);
+            value = this.insertRawSubstr(oldValue, enteredSubstr, caretPos);
 
-            caretPos = this.getFilledLength(clearedValue);
+            if (substrLen !== 1 || caretPos >= prefixLen && caretPos < maskLen) {
+                caretPos = this.getFilledLength(clearedValue);
+            }
+            else if (caretPos < maskLen) {
+                caretPos++;
+            }
         }
@@ -512,0 +530,0 @@ else if (maskChar && valueLen < maskLen) {

package.json

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

README.md

@@ -34,1 +34,4 @@ # react-input-mask
 ```
+
+## Known issues
+Screen keyboard backspace may not work in Android 4.x browser due to broken input events.

tests/input-test.js

@@ -193,2 +193,10 @@ import React from 'react';
         input.setCaretPos(0);
+        TestUtils.Simulate.keyPress(inputNode, { key: '+' });
+        expect(inputNode.value).toEqual('+7 (___) ___ __ __');
+
+        input.setCaretPos(0);
+        TestUtils.Simulate.keyPress(inputNode, { key: '7' });
+        expect(inputNode.value).toEqual('+7 (7__) ___ __ __');
+
+        input.setCaretPos(0);
         TestUtils.Simulate.keyPress(inputNode, { key: 'E' });
@@ -220,2 +228,9 @@ expect(inputNode.value).toEqual('+7 (E__) ___ __ __');
 
+        inputNode.value = "+7 (";
+        input.setCaretPos(4);
+        TestUtils.Simulate.change(inputNode);
+        input.setCaretPos(0);
+        TestUtils.Simulate.keyPress(inputNode, { key: '+' });
+        expect(inputNode.value).toEqual('+7 (');
+
         ReactDOM.unmountComponentAtNode(container);
@@ -222,0 +237,0 @@ }));

No alert changes

Improved metrics

Total package byte prevSize

65118

increased by3.09%

Lines of code

1644

increased by2.62%

Number of lines in readme file

37

increased by8.82%

No dependency changes