From 010ad867af0fb5811ed6b66ae079c28e03e50a28 Mon Sep 17 00:00:00 2001 From: tienifr Date: Sat, 28 Oct 2023 16:20:50 +0700 Subject: [PATCH 1/4] fix: 30281 --- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index dc100fffe4f1..c698f09ca495 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -93,6 +93,7 @@ function BaseValidateCodeForm(props) { const prevRequiresTwoFactorAuth = usePrevious(props.account.requiresTwoFactorAuth); const prevValidateCode = usePrevious(props.credentials.validateCode); + const prevIsUsingRecoveryCode = usePrevious(props.prevIsUsingRecoveryCode); const inputValidateCodeRef = useRef(); const input2FARef = useRef(); @@ -125,6 +126,13 @@ function BaseValidateCodeForm(props) { setValidateCode(props.credentials.validateCode); }, [props.credentials.validateCode, prevValidateCode]); + useEffect(() => { + if (!input2FARef.current || !prevIsUsingRecoveryCode || props.isUsingRecoveryCode) { + return; + } + input2FARef.current.focus(); + }, [prevIsUsingRecoveryCode, props.isUsingRecoveryCode]); + useEffect(() => { if (!input2FARef.current || prevRequiresTwoFactorAuth || !props.account.requiresTwoFactorAuth) { return; From c3779878e800f08e5b4a708a20465f37c1ca163a Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 31 Oct 2023 15:49:43 +0700 Subject: [PATCH 2/4] delay focus --- src/components/MagicCodeInput.js | 5 +++++ src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 8 -------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 585b7005ab1e..d45dfcec0764 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -26,6 +26,9 @@ const propTypes = { /** Should the input auto focus */ autoFocus: PropTypes.bool, + /** Whether we should wait before focusing the TextInput, useful when using transitions */ + shouldDelayFocus: PropTypes.bool, + /** Error text to display */ errorText: PropTypes.string, @@ -60,6 +63,7 @@ const defaultProps = { value: '', name: '', autoFocus: true, + shouldDelayFocus: false, errorText: '', shouldSubmitOnComplete: true, innerRef: null, @@ -312,6 +316,7 @@ function MagicCodeInput(props) { }} disableKeyboard={props.isDisableKeyboard} autoFocus={index === 0 && props.autoFocus} + shouldDelayFocus={index === 0 && props.shouldDelayFocus} inputMode={props.isDisableKeyboard ? 'none' : 'numeric'} textContentType="oneTimeCode" name={props.name} diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index 1374998df2c7..2d8f0e98e03c 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -93,7 +93,6 @@ function BaseValidateCodeForm(props) { const prevRequiresTwoFactorAuth = usePrevious(props.account.requiresTwoFactorAuth); const prevValidateCode = usePrevious(props.credentials.validateCode); - const prevIsUsingRecoveryCode = usePrevious(props.prevIsUsingRecoveryCode); const inputValidateCodeRef = useRef(); const input2FARef = useRef(); @@ -126,13 +125,6 @@ function BaseValidateCodeForm(props) { setValidateCode(props.credentials.validateCode); }, [props.credentials.validateCode, prevValidateCode]); - useEffect(() => { - if (!input2FARef.current || !prevIsUsingRecoveryCode || props.isUsingRecoveryCode) { - return; - } - input2FARef.current.focus(); - }, [prevIsUsingRecoveryCode, props.isUsingRecoveryCode]); - useEffect(() => { if (!input2FARef.current || prevRequiresTwoFactorAuth || !props.account.requiresTwoFactorAuth) { return; From 89fe795efc5067966a51c7f197c6262d42f4af64 Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 31 Oct 2023 16:20:10 +0700 Subject: [PATCH 3/4] delay focus by default --- src/components/MagicCodeInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index d45dfcec0764..a9a5a47ace01 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -63,7 +63,7 @@ const defaultProps = { value: '', name: '', autoFocus: true, - shouldDelayFocus: false, + shouldDelayFocus: true, errorText: '', shouldSubmitOnComplete: true, innerRef: null, From bcdd5898ee99719e310bf781da747ca79fdf699a Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 1 Nov 2023 01:05:57 +0700 Subject: [PATCH 4/4] revert: shouldDelayFocus by default --- src/components/MagicCodeInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index a9a5a47ace01..d45dfcec0764 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -63,7 +63,7 @@ const defaultProps = { value: '', name: '', autoFocus: true, - shouldDelayFocus: true, + shouldDelayFocus: false, errorText: '', shouldSubmitOnComplete: true, innerRef: null,