Add fix for an autocomplete case where there is no maskPlaceholder

Author: Caleb Doucet

.size-snapshot.json

@@ -1,22 +1,22 @@
 {
   "dist/react-input-mask.js": {
-    "bundled": 81133,
-    "minified": 26343,
-    "gzipped": 8443
+    "bundled": 81871,
+    "minified": 26472,
+    "gzipped": 8464
   },
   "lib/react-input-mask.development.js": {
-    "bundled": 31686,
-    "minified": 13230,
-    "gzipped": 4373
+    "bundled": 32398,
+    "minified": 13359,
+    "gzipped": 4396
   },
   "dist/react-input-mask.min.js": {
-    "bundled": 45624,
-    "minified": 15614,
-    "gzipped": 5406
+    "bundled": 46362,
+    "minified": 15743,
+    "gzipped": 5422
   },
   "lib/react-input-mask.production.min.js": {
-    "bundled": 30355,
-    "minified": 12153,
-    "gzipped": 4035
+    "bundled": 31067,
+    "minified": 12282,
+    "gzipped": 4057
   }
 }

src/utils/mask.js

@@ -226,6 +226,7 @@ export default class MaskUtils {
     { value, selection },
     { value: previousValue, selection: previousSelection }
   ) => {
+    const { maskPlaceholder } = this.maskOptions;
     if (
       // Autocomplete will set the previous selection to the length of the autocompleted value
       previousSelection.end < previousValue.length &&
@@ -243,9 +244,26 @@ export default class MaskUtils {
       // When both previous and current state have no selection length, the cursor index is less than it was before
       // and the cursor is at the end of the new value
       // Check each character to see if there are any changes which is only possible if the value was autocompleted.
-      return value
-        .split("")
-        .some((char, index) => char !== previousValue[index]);
+      return value.split("").some((char, index) => {
+        return char !== previousValue[index];
+      });
+    }
+
+    if (
+      !maskPlaceholder &&
+      previousSelection.length === 0 &&
+      previousValue.length < value.length
+    ) {
+      // If there is no mask placeholder, the selection is 0 and the new value is longer than the previous value
+      // (characters have been added)
+      return value.split("").some((char, index) => {
+        // Check each character before the selection to see if they have changed
+        if (index < previousSelection.start) {
+          // Any character before the previous selection that changes will be changed because of autofill
+          return char !== previousValue[index];
+        }
+        return false;
+      });
     }
 
     return false;
@@ -264,8 +282,12 @@ export default class MaskUtils {
 
     if (this.isAutoFilled(currentState, previousState)) {
       // If the value is autocompleted treat it as if the input started empty.
-      previousValue = "";
-      previousSelection = { start: 0, end: 0, length: 0 };
+      previousValue = prefix;
+      previousSelection = {
+        start: 0,
+        end: 0,
+        length: 0
+      };
     }
 
     if (selection.end > previousSelection.start) {

tests/input/input.js

@@ -563,6 +563,8 @@ describe("react-input-mask", () => {
     await simulateBackspacePress(input);
     expect(input.value).to.equal("+7 (495) 156 45 4");
 
+    await setCursorPosition(input, 17);
+
     input.value = "+7 (";
     setCursorPosition(input, 4);
     TestUtils.Simulate.change(input);
@@ -1239,6 +1241,23 @@ describe("react-input-mask", () => {
     expect(input.value).to.equal("1234-5678");
   });
 
+  it("should handle autofill when there is a prefix and no mask placeholder", async () => {
+    const { input } = createInput(
+      <Input mask="(9999-9999)" defaultValue="(" maskPlaceholder={null} />
+    );
+    await simulateFocus(input);
+
+    setCursorPosition(input, 1);
+    TestUtils.Simulate.change(input);
+    expect(input.value).to.equal("(");
+
+    input.value = "12345678";
+    setCursorPosition(input, 8);
+    TestUtils.Simulate.change(input);
+
+    expect(input.value).to.equal("(1234-5678)");
+  });
+
   it("should handle transition between masked and non-masked state", async () => {
     const { input, setProps } = createInput(<Input />);
     setProps({