From 0413c54256969147fecf75878c76c6e781c9792e Mon Sep 17 00:00:00 2001 From: Olgierd Date: Tue, 21 Oct 2025 22:57:02 +0200 Subject: [PATCH 1/5] Add delay to prevent focus from setting before the animation is finished --- .../ValidateCodeForm/BaseValidateCodeForm.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index 1af720091f93..2bb1837ab04f 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -177,7 +177,14 @@ function BaseValidateCodeForm({ if (!validateCodeSent) { return; } - inputValidateCodeRef.current?.clear(); + // Keyboard won't show if we focus the input with a delay, so we need to focus immediately. + if (!isMobileSafari()) { + focusTimeoutRef.current = setTimeout(() => { + inputValidateCodeRef.current?.clear(); + }, CONST.ANIMATED_TRANSITION); + } else { + inputValidateCodeRef.current?.clear(); + } }, [validateCodeSent]); useEffect(() => { From 7d9b4c1f8596cd1b5ed20b769fe1d7be00f8a59e Mon Sep 17 00:00:00 2001 From: Olgierd Date: Wed, 22 Oct 2025 12:04:49 +0200 Subject: [PATCH 2/5] Add comment describing the changes and improve if statement to suit case better --- .../ValidateCodeForm/BaseValidateCodeForm.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index 2bb1837ab04f..194fbed0c4c9 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -14,6 +14,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -108,6 +109,7 @@ function BaseValidateCodeForm({ }: ValidateCodeFormProps) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); + const {isSmallScreenWidth} = useResponsiveLayout(); const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -177,8 +179,9 @@ function BaseValidateCodeForm({ if (!validateCodeSent) { return; } - // Keyboard won't show if we focus the input with a delay, so we need to focus immediately. - if (!isMobileSafari()) { + // Delay prevents the wide RHP from flickering in the background while modal with validation slides out and gains focus (https://github.com/Expensify/App/issues/73030) + // Keyboard on Mobile Safari won't show if we focus the input with a delay, so we need to focus immediately; wide RHP SCREENS.RIGHT_MODAL.SEARCH_REPORT is accessible only when isSmallScreenWidth is false. + if (!isSmallScreenWidth && !isMobileSafari()) { focusTimeoutRef.current = setTimeout(() => { inputValidateCodeRef.current?.clear(); }, CONST.ANIMATED_TRANSITION); From 8d513e0ac13a403f78756b054f2007036e81738e Mon Sep 17 00:00:00 2001 From: Olgierd Date: Thu, 23 Oct 2025 15:12:37 +0200 Subject: [PATCH 3/5] Restrict the if statement condition to better match the use case --- .../ValidateCodeForm/BaseValidateCodeForm.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index 194fbed0c4c9..71b1445f11a4 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,10 +11,10 @@ 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'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -109,7 +109,7 @@ function BaseValidateCodeForm({ }: ValidateCodeFormProps) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); - const {isSmallScreenWidth} = useResponsiveLayout(); + const {wideRHPRouteKeys} = useContext(WideRHPContext); const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -179,9 +179,9 @@ function BaseValidateCodeForm({ if (!validateCodeSent) { return; } - // Delay prevents the wide RHP from flickering in the background while modal with validation slides out and gains focus (https://github.com/Expensify/App/issues/73030) - // Keyboard on Mobile Safari won't show if we focus the input with a delay, so we need to focus immediately; wide RHP SCREENS.RIGHT_MODAL.SEARCH_REPORT is accessible only when isSmallScreenWidth is false. - if (!isSmallScreenWidth && !isMobileSafari()) { + // Delay prevents the input from gaining focus before the animation finishes, + // which would cause the wide RHP to flicker in the background while the modal with validation slides out over it. + if (wideRHPRouteKeys.length > 0 && !isMobileSafari()) { focusTimeoutRef.current = setTimeout(() => { inputValidateCodeRef.current?.clear(); }, CONST.ANIMATED_TRANSITION); From 47f57286b749e4426fc6840443224da3e7a160ad Mon Sep 17 00:00:00 2001 From: Olgierd Date: Fri, 24 Oct 2025 17:14:47 +0200 Subject: [PATCH 4/5] Improve comment clarity --- .../ValidateCodeForm/BaseValidateCodeForm.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index 71b1445f11a4..79b0675bb850 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -179,8 +179,8 @@ function BaseValidateCodeForm({ if (!validateCodeSent) { return; } - // Delay prevents the input from gaining focus before the animation finishes, - // which would cause the wide RHP to flicker in the background while the modal with validation slides out over it. + // 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(); From 84cf737f1f76d951ab1bf7637f1f2ad4d2fd4e05 Mon Sep 17 00:00:00 2001 From: Olgierd Date: Mon, 27 Oct 2025 14:56:58 +0100 Subject: [PATCH 5/5] Add useEffect missing dependency: wideRHPRouteKeys.length --- .../ValidateCodeForm/BaseValidateCodeForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index 79b0675bb850..cd6aa7a84705 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -188,7 +188,7 @@ function BaseValidateCodeForm({ } else { inputValidateCodeRef.current?.clear(); } - }, [validateCodeSent]); + }, [validateCodeSent, wideRHPRouteKeys.length]); useEffect(() => { if (timeRemaining > 0) {