diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index 1af720091f93..cd6aa7a84705 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -1,6 +1,6 @@ import {useFocusEffect} from '@react-navigation/native'; import type {ForwardedRef} from 'react'; -import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; +import React, {useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import type {StyleProp, ViewStyle} from 'react-native'; import Button from '@components/Button'; @@ -11,6 +11,7 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import RenderHTML from '@components/RenderHTML'; import Text from '@components/Text'; +import {WideRHPContext} from '@components/WideRHPContextProvider'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; @@ -108,6 +109,7 @@ function BaseValidateCodeForm({ }: ValidateCodeFormProps) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); + const {wideRHPRouteKeys} = useContext(WideRHPContext); const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -177,8 +179,16 @@ function BaseValidateCodeForm({ if (!validateCodeSent) { return; } - inputValidateCodeRef.current?.clear(); - }, [validateCodeSent]); + // Delay prevents the input from gaining focus before the RHP slide out animation finishes, + // which would cause the wide RHP to flicker in the background. + if (wideRHPRouteKeys.length > 0 && !isMobileSafari()) { + focusTimeoutRef.current = setTimeout(() => { + inputValidateCodeRef.current?.clear(); + }, CONST.ANIMATED_TRANSITION); + } else { + inputValidateCodeRef.current?.clear(); + } + }, [validateCodeSent, wideRHPRouteKeys.length]); useEffect(() => { if (timeRemaining > 0) {