diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js index bcea33d9c366..e39edee911d7 100644 --- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; +import {useFocusEffect} from '@react-navigation/native'; import MagicCodeInput from '../../../../../components/MagicCodeInput'; import * as ErrorUtils from '../../../../../libs/ErrorUtils'; import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize'; @@ -77,6 +78,7 @@ function BaseValidateCodeForm(props) { const inputValidateCodeRef = useRef(); const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin'); const shouldDisableResendValidateCode = props.network.isOffline || props.account.isLoading; + const focusTimeoutRef = useRef(null); useImperativeHandle(props.innerRef, () => ({ focus() { @@ -87,6 +89,21 @@ function BaseValidateCodeForm(props) { }, })); + useFocusEffect( + useCallback(() => { + if (!inputValidateCodeRef.current) { + return; + } + focusTimeoutRef.current = setTimeout(inputValidateCodeRef.current.focus, CONST.ANIMATED_TRANSITION); + return () => { + if (!focusTimeoutRef.current) { + return; + } + clearTimeout(focusTimeoutRef.current); + }; + }, []), + ); + useEffect(() => { Session.clearAccountMessages(); if (!validateLoginError) { diff --git a/src/styles/styles.js b/src/styles/styles.js index de9a48fca380..b6ddd2f2a76f 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2478,6 +2478,7 @@ const styles = (theme) => ({ // However, it is not possible to override the background-color directly as explained in this resource: https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill // Therefore, the transition effect needs to be delayed. transitionDelay: '99999s', + transitionProperty: 'background-color', } : {}), },