diff --git a/src/pages/ProcessMoneyRequestHoldPage.tsx b/src/pages/ProcessMoneyRequestHoldPage.tsx index 9d008b93ec6a..8872c251be3f 100644 --- a/src/pages/ProcessMoneyRequestHoldPage.tsx +++ b/src/pages/ProcessMoneyRequestHoldPage.tsx @@ -1,5 +1,6 @@ -import React, {useCallback, useMemo} from 'react'; -import {View} from 'react-native'; +import {useFocusEffect} from '@react-navigation/native'; +import React, {useCallback, useMemo, useRef} from 'react'; +import {InteractionManager, View} from 'react-native'; import Button from '@components/Button'; import HeaderPageLayout from '@components/HeaderPageLayout'; import HoldMenuSectionList from '@components/HoldMenuSectionList'; @@ -7,13 +8,27 @@ import Text from '@components/Text'; import TextPill from '@components/TextPill'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import blurActiveElement from '@libs/Accessibility/blurActiveElement'; import Navigation from '@libs/Navigation/Navigation'; import * as IOU from '@userActions/IOU'; +import CONST from '@src/CONST'; function ProcessMoneyRequestHoldPage() { const styles = useThemeStyles(); const {translate} = useLocalize(); + const focusTimeoutRef = useRef(null); + useFocusEffect( + useCallback(() => { + focusTimeoutRef.current = setTimeout(() => { + InteractionManager.runAfterInteractions(() => { + blurActiveElement(); + }); + }, CONST.ANIMATED_TRANSITION); + return () => focusTimeoutRef.current && clearTimeout(focusTimeoutRef.current); + }, []), + ); + const onConfirm = useCallback(() => { IOU.dismissHoldUseExplanation(); Navigation.goBack(); @@ -26,6 +41,7 @@ function ProcessMoneyRequestHoldPage() { text={translate('common.buttonConfirm')} onPress={onConfirm} large + pressOnEnter /> ), [onConfirm, translate],