Fix cursor position after delete with multiple non-accepted chars after (#101)

* Add failing test

* Fix by accounting for additional non-accepted chars

Author: lewisl9029

src/Rifm.js

@@ -100,6 +100,15 @@ export const useRifm = (props: Args): RenderProps => {
       // in case of isDeleleteButtonDown cursor should move differently vs backspace
       const deleteWasNoOp = isDeleleteButtonDown && isNoOperation;
 
+      const valueAfterSelectionStart = eventValue.slice(input.selectionStart);
+
+      const acceptedCharIndexAfterDelete = valueAfterSelectionStart.search(
+        props.accept || /\d/g
+      );
+
+      const charsToSkipAfterDelete =
+        acceptedCharIndexAfterDelete !== -1 ? acceptedCharIndexAfterDelete : 0;
+
       // Create string from only accepted symbols
       const clean = str => (str.match(props.accept || /\d/g) || []).join('');
 
@@ -200,7 +209,7 @@ export const useRifm = (props: Args): RenderProps => {
         }
 
         input.selectionStart = input.selectionEnd =
-          start + (deleteWasNoOp ? 1 : 0);
+          start + (deleteWasNoOp ? 1 + charsToSkipAfterDelete : 0);
       };
     });
   }

tests/RifmFormat.test.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { formatFixedPointNumber, formatFloatingPointNumber } from './format';
+import { formatFixedPointNumber, formatFloatingPointNumber, formatPhone } from './format';
 import { createExec } from './utils/exec';
 
 test('format works', async () => {
@@ -155,3 +155,14 @@ it('replace is applied to input value', () => {
 
   exec({ type: 'MOVE_CARET', payload: -5 }).toMatchInlineSnapshot(`"|hello"`);
 });
+
+it('moves cursor to expected position when deleting with more than 1 non-accepted chars after cursor', () => {
+  const exec = createExec({
+    format: formatPhone,
+    accept: /\d+/g,
+    initialValue: '1 (234) 567',
+  });
+
+  exec({ type: 'MOVE_CARET', payload: 6 }).toMatchInlineSnapshot(`"1 (234|) 567"`);
+  exec({ type: 'DELETE' }).toMatchInlineSnapshot(`"1 (234) |567"`);
+});