fix(ui): verification-code iteration fix (#2917)

packages/ui/src/components/Toast/index.tsx

@@ -30,6 +30,7 @@ const Toast = ({ message, duration = 3000, callback }: Props) => {
 
   return (
     <ReactModal
+      shouldFocusAfterRender={false}
       // For styling use
       // eslint-disable-next-line jsx-a11y/aria-role
       role="toast"

packages/ui/src/components/VerificationCode/index.test.tsx

@@ -6,7 +6,7 @@ describe('VerificationCode Component', () => {
   const onChange = jest.fn();
 
   beforeEach(() => {
-    onChange.mockClear();
+    jest.clearAllMocks();
   });
 
   it('render with value', () => {
@@ -80,9 +80,11 @@ describe('VerificationCode Component', () => {
     const inputElements = container.querySelectorAll('input');
 
     if (inputElements[2]) {
-      fireEvent.input(inputElements[2], { target: { value: 'a' } });
+      for (const value of ['a', 'e', '+', '-', '.']) {
+        fireEvent.input(inputElements[2], { target: { value } });
         expect(onChange).not.toBeCalled();
       }
+    }
   });
 
   it('replace old value with new input char', () => {
@@ -124,14 +126,14 @@ describe('VerificationCode Component', () => {
     }
   });
 
-  it('onPasteHandler', () => {
+  describe('onPasteHandler', () => {
+    it('full update', () => {
       const input = ['1', '2', '3', '4', '5', '6'];
       const { container } = render(
         <VerificationCode name="passcode" value={input} onChange={onChange} />
       );
       const inputElements = container.querySelectorAll('input');
 
-    // Full update
       if (inputElements[0]) {
         fireEvent.paste(inputElements[0], {
           clipboardData: {
@@ -140,8 +142,15 @@ describe('VerificationCode Component', () => {
         });
         expect(onChange).toBeCalledWith(['7', '8', '9', '0', '1', '2']);
       }
+    });
+
+    it('partial update', () => {
+      const input = ['1', '2', '3', '4', '5', '6'];
+      const { container } = render(
+        <VerificationCode name="passcode" value={input} onChange={onChange} />
+      );
+      const inputElements = container.querySelectorAll('input');
 
-    // Partial update
       if (inputElements[2]) {
         fireEvent.paste(inputElements[2], {
           clipboardData: {
@@ -150,8 +159,15 @@ describe('VerificationCode Component', () => {
         });
         expect(onChange).toBeCalledWith(['1', '2', '7', '8', '9', '6']);
       }
+    });
+
+    it('overLength partial update', () => {
+      const input = ['1', '2', '3', '4', '5', '6'];
+      const { container } = render(
+        <VerificationCode name="passcode" value={input} onChange={onChange} />
+      );
+      const inputElements = container.querySelectorAll('input');
 
-    // OverLength update
       if (inputElements[4]) {
         fireEvent.paste(inputElements[4], {
           clipboardData: {
@@ -160,10 +176,32 @@ describe('VerificationCode Component', () => {
         });
         expect(onChange).toBeCalledWith(['1', '2', '3', '4', '7', '8']);
       }
+    });
 
-    onChange.mockClear();
+    it('filter numeric past data', () => {
+      const input = ['1', '2', '3', '4', '5', '6'];
+      const { container } = render(
+        <VerificationCode name="passcode" value={input} onChange={onChange} />
+      );
+      const inputElements = container.querySelectorAll('input');
+
+      if (inputElements[0]) {
+        fireEvent.paste(inputElements[0], {
+          clipboardData: {
+            getData: () => 'test input 124 343',
+          },
+        });
+        expect(onChange).toBeCalledWith(['1', '2', '4', '3', '4', '3']);
+      }
+    });
+
+    it('Non-numeric past data', () => {
+      const input = ['1', '2', '3', '4', '5', '6'];
+      const { container } = render(
+        <VerificationCode name="passcode" value={input} onChange={onChange} />
+      );
+      const inputElements = container.querySelectorAll('input');
 
-    // Non-numeric past data
       if (inputElements[0]) {
         fireEvent.paste(inputElements[0], {
           clipboardData: {
@@ -174,3 +212,4 @@ describe('VerificationCode Component', () => {
       }
     });
   });
+});

packages/ui/src/components/VerificationCode/index.tsx

@@ -105,7 +105,7 @@ const VerificationCode = ({
         clipboardData,
       } = event;
 
-      const data = clipboardData.getData('text');
+      const data = clipboardData.getData('text').match(/\d/g)?.join('') ?? '';
 
       // Unrecognized target input field
       if (!dataset.id) {
@@ -160,6 +160,10 @@ const VerificationCode = ({
           event.preventDefault();
           nextTarget?.focus();
           break;
+        case '+':
+        case '-':
+        case 'e':
+        case '.':
         case 'ArrowUp':
         case 'ArrowDown':
           event.preventDefault();
@@ -175,7 +179,7 @@ const VerificationCode = ({
     if (value.length === 0) {
       inputReferences.current[0]?.focus();
     }
-  }, [value, onChange]);
+  }, [value]);
 
   return (
     <div className={className}>

packages/ui/src/containers/VerificationCode/index.tsx

@@ -71,9 +71,10 @@ const VerificationCode = ({ type, method, className, hasPasswordButton, target }
         <TextLink
           className={styles.link}
           text="description.resend_passcode"
-          onClick={() => {
+          onClick={async () => {
             clearErrorMessage();
-            void onResendVerificationCode();
+            await onResendVerificationCode();
+            setCode([]);
           }}
         />
       )}