Merge pull request #20891 from WikusKriek/19711-2FA-Input-field-not-f…

…ocused-on-mobile 2FA Input field not focused on mobile
Expensify · Jun 20, 2023 · 93042af · 93042af
2 parents 5b7f39b + 7f8907f
commit 93042af
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
@@ -106,10 +106,18 @@ function MagicCodeInput(props) {
         setFocusedIndex(undefined);
     };
 
+    const focusMagicCodeInput = () => {
+        setFocusedIndex(0);
+        inputRefs.current[0].focus();
+    };
+
     useImperativeHandle(props.innerRef, () => ({
         focus() {
-            setFocusedIndex(0);
-            inputRefs.current[0].focus();
+            focusMagicCodeInput();
+        },
+        resetFocus() {
+            setInput('');
+            focusMagicCodeInput();
         },
         clear() {
             setInput('');

diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -111,7 +111,7 @@ function BaseValidateCodeForm(props) {
         if (!input2FARef.current || prevRequiresTwoFactorAuth || !props.account.requiresTwoFactorAuth) {
             return;
         }
-        input2FARef.current.focus();
+        input2FARef.current.resetFocus();
     }, [props.account.requiresTwoFactorAuth, prevRequiresTwoFactorAuth]);
 
     useEffect(() => {