diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index f8fecceebb30..cea98cfd3747 100644 --- 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 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(() => {