Merge pull request Expensify#23734 from Pujan92/fix/23596

Fix: App crashes after pressing Backspace/Delete key in Incorrect magic code page
Santhosh-Sellavel · Jul 28, 2023 · 7e5dfb8 · 7e5dfb8
2 parents ec1ccf8 + 5488702
commit 7e5dfb8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 43 deletions.
diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
@@ -106,23 +106,11 @@ function MagicCodeInput(props) {
         setFocusedIndex(undefined);
     };
 
-    const focusMagicCodeInput = () => {
-        setFocusedIndex(0);
-        inputRefs.current[0].focus();
-    };
-
     useImperativeHandle(props.innerRef, () => ({
         focus() {
-            focusMagicCodeInput();
-        },
-        resetFocus() {
-            setInput('');
-            focusMagicCodeInput();
+            inputRefs.current[0].focus();
         },
         clear() {
-            setInput('');
-            setFocusedIndex(0);
-            setEditIndex(0);
             inputRefs.current[0].focus();
             props.onChangeText('');
         },
@@ -176,23 +164,13 @@ function MagicCodeInput(props) {
     }, []);
 
     /**
-     * Focuses on the input when it is pressed.
-     *
-     * @param {Object} event
-     * @param {Number} index
-     */
-    const onFocus = (event) => {
-        event.preventDefault();
-    };
-
-    /**
-     * Callback for the onPress event, updates the indexes
+     * Callback for the onFocus event, updates the indexes
      * of the currently focused input.
      *
      * @param {Object} event
      * @param {Number} index
      */
-    const onPress = (event, index) => {
+    const onFocus = (event, index) => {
         event.preventDefault();
         setInput('');
         setFocusedIndex(index);
@@ -224,8 +202,7 @@ function MagicCodeInput(props) {
         let numbers = decomposeString(props.value, props.maxLength);
         numbers = [...numbers.slice(0, editIndex), ...numbersArr, ...numbers.slice(numbersArr.length + editIndex, props.maxLength)];
 
-        setFocusedIndex(updatedFocusedIndex);
-        setInput(value);
+        inputRefs.current[updatedFocusedIndex].focus();
 
         const finalInput = composeToString(numbers);
         props.onChangeText(finalInput);
@@ -265,13 +242,6 @@ function MagicCodeInput(props) {
             }
 
             const newFocusedIndex = Math.max(0, focusedIndex - 1);
-
-            // Saves the input string so that it can compare to the change text
-            // event that will be triggered, this is a workaround for mobile that
-            // triggers the change text on the event after the key press.
-            setInput('');
-            setFocusedIndex(newFocusedIndex);
-            setEditIndex(newFocusedIndex);
             props.onChangeText(composeToString(numbers));
 
             if (!_.isUndefined(newFocusedIndex)) {
@@ -280,15 +250,9 @@ function MagicCodeInput(props) {
         }
         if (keyValue === 'ArrowLeft' && !_.isUndefined(focusedIndex)) {
             const newFocusedIndex = Math.max(0, focusedIndex - 1);
-            setInput('');
-            setFocusedIndex(newFocusedIndex);
-            setEditIndex(newFocusedIndex);
             inputRefs.current[newFocusedIndex].focus();
         } else if (keyValue === 'ArrowRight' && !_.isUndefined(focusedIndex)) {
             const newFocusedIndex = Math.min(focusedIndex + 1, props.maxLength - 1);
-            setInput('');
-            setFocusedIndex(newFocusedIndex);
-            setEditIndex(newFocusedIndex);
             inputRefs.current[newFocusedIndex].focus();
         } else if (keyValue === 'Enter') {
             // We should prevent users from submitting when it's offline.
@@ -346,8 +310,7 @@ function MagicCodeInput(props) {
                                     onChangeText(value);
                                 }}
                                 onKeyPress={onKeyPress}
-                                onPress={(event) => onPress(event, index)}
-                                onFocus={onFocus}
+                                onFocus={(event) => onFocus(event, index)}
                                 caretHidden={isMobileSafari}
                                 inputStyle={[isMobileSafari ? styles.magicCodeInputTransparent : undefined]}
                                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}

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