From 5033e49d8ef0d284b37558c1b50d500767a0431d Mon Sep 17 00:00:00 2001 From: Pujan Date: Thu, 27 Jul 2023 19:14:04 +0530 Subject: [PATCH 1/4] used onFocus instead of onPress for MagicInput --- src/components/MagicCodeInput.js | 33 +++----------------------------- 1 file changed, 3 insertions(+), 30 deletions(-) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index f8fecceebb30..6eef63f12c83 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -120,9 +120,6 @@ function MagicCodeInput(props) { focusMagicCodeInput(); }, clear() { - setInput(''); - setFocusedIndex(0); - setEditIndex(0); inputRefs.current[0].focus(); props.onChangeText(''); }, @@ -176,23 +173,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); @@ -265,13 +252,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 +260,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 +320,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} From e32c93f41dd6ad53a70ea9da0a961dad7b57c13f Mon Sep 17 00:00:00 2001 From: Pujan Date: Thu, 27 Jul 2023 22:42:10 +0530 Subject: [PATCH 2/4] focus input on change text --- src/components/MagicCodeInput.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 6eef63f12c83..23ac028c6cb6 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -211,8 +211,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); From e7b3e972660b3b55ae4d730a5dda2edccd9e1842 Mon Sep 17 00:00:00 2001 From: Pujan Date: Thu, 27 Jul 2023 22:53:52 +0530 Subject: [PATCH 3/4] removed not required setFocusedIndex call --- src/components/MagicCodeInput.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 23ac028c6cb6..6dd71ebd1e1c 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -107,7 +107,6 @@ function MagicCodeInput(props) { }; const focusMagicCodeInput = () => { - setFocusedIndex(0); inputRefs.current[0].focus(); }; From 5488702fa72b99ce3009505af9f9cb9a00d08947 Mon Sep 17 00:00:00 2001 From: Pujan Date: Fri, 28 Jul 2023 16:41:18 +0530 Subject: [PATCH 4/4] minor adjustments to MagicCodeInput --- src/components/MagicCodeInput.js | 10 +--------- .../signin/ValidateCodeForm/BaseValidateCodeForm.js | 2 +- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 6dd71ebd1e1c..cea98cfd3747 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -106,17 +106,9 @@ function MagicCodeInput(props) { setFocusedIndex(undefined); }; - const focusMagicCodeInput = () => { - inputRefs.current[0].focus(); - }; - useImperativeHandle(props.innerRef, () => ({ focus() { - focusMagicCodeInput(); - }, - resetFocus() { - setInput(''); - focusMagicCodeInput(); + inputRefs.current[0].focus(); }, clear() { inputRefs.current[0].focus(); diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index cfc93701ab1d..a68f99df6d24 100755 --- 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(() => {