Fix cursor bugs

Author: Daniel Yefet

.npmignore

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Daniel Yefet
+Copyright (c) 2021 Daniel Yefet
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

LICENCE

@@ -1,6 +1,6 @@
 {
   "name": "react-input-auto-format",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "author": "Daniel Yefet <[email protected]>",
   "description": "A super simple input component that formats as you type.",
   "keywords": [

package.json

@@ -35,6 +35,10 @@ function stripPatternCharacters(value) {
   return value.replace(/[^\dA-z]/g, '');
 }
 
+function isUserCharacter(character) {
+  return /[\dA-z]/.test(character);
+}
+
 function Input({
   onChange = noop,
   onValueChange = noop,
@@ -56,9 +60,11 @@ function Input({
     let rawValue = stripPatternCharacters(inputValue);
 
     if (didDelete) {
-      const nonNumericWasDeleted = /[^\dA-z]/.test([...value][cursorPosition]);
+      const patternCharacterDeleted = !isUserCharacter(
+        [...value][cursorPosition]
+      );
 
-      if (nonNumericWasDeleted) {
+      if (patternCharacterDeleted) {
         const firstBit = inputValue.substr(0, cursorPosition);
         const rawFirstBit = stripPatternCharacters(firstBit);
 
@@ -75,19 +81,39 @@ function Input({
 
     const formattedValue = format(rawValue, pattern);
 
-    infoRef.current.formattingWasAdded =
-      formattedValue.length - value.length > 1;
+    infoRef.current.endOfSection = false;
+
+    if (!didDelete) {
+      const formattedCharacters = [...formattedValue];
+      const nextCharacter = formattedCharacters[cursorPosition];
+      const nextCharacterIsPattern = !isUserCharacter(nextCharacter);
+      const nextUserCharacterIndex = formattedValue
+        .substr(cursorPosition)
+        .search(/[\dA-z]/);
+      const numbersAhead = nextUserCharacterIndex !== -1;
+
+      infoRef.current.endOfSection = nextCharacterIsPattern && !numbersAhead;
+
+      if (
+        nextCharacterIsPattern &&
+        !isUserCharacter(formattedCharacters[cursorPosition - 1]) &&
+        numbersAhead
+      )
+        infoRef.current.cursorPosition =
+          cursorPosition + nextUserCharacterIndex + 1;
+    }
 
     onValueChange(rawValue);
     onChange(event);
     setValue(formattedValue);
   }
 
   useEffect(() => {
-    const { cursorPosition, formattingWasAdded } = infoRef.current;
+    const { cursorPosition, endOfSection } = infoRef.current;
+
+    if (endOfSection) return;
 
-    if (!formattingWasAdded)
-      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
+    inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
   }, [value]);
 
   return (