diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 7d1ac66408ba..84caa618f0f8 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -1,7 +1,7 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; import lodashIsEqual from 'lodash/isEqual'; import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'; -import {View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; @@ -11,6 +11,7 @@ import {MouseProvider} from '@hooks/useMouseContext'; import usePermissions from '@hooks/usePermissions'; import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; +import blurActiveElement from '@libs/Accessibility/blurActiveElement'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import DistanceRequestUtils from '@libs/DistanceRequestUtils'; import type {MileageRate} from '@libs/DistanceRequestUtils'; @@ -754,11 +755,12 @@ function MoneyRequestConfirmationList({ ); const focusTimeoutRef = useRef(null); - const confirmButtonRef = useRef(null); useFocusEffect( useCallback(() => { focusTimeoutRef.current = setTimeout(() => { - confirmButtonRef.current?.focus(); + InteractionManager.runAfterInteractions(() => { + blurActiveElement(); + }); }, CONST.ANIMATED_TRANSITION); return () => focusTimeoutRef.current && clearTimeout(focusTimeoutRef.current); }, []), @@ -795,7 +797,6 @@ function MoneyRequestConfirmationList({ /> ) : ( {}; + +export default blurActiveElement; diff --git a/src/libs/Accessibility/blurActiveElement/index.ts b/src/libs/Accessibility/blurActiveElement/index.ts new file mode 100644 index 000000000000..71040ea24623 --- /dev/null +++ b/src/libs/Accessibility/blurActiveElement/index.ts @@ -0,0 +1,8 @@ +const blurActiveElement = () => { + if (!(document.activeElement instanceof HTMLElement)) { + return; + } + document.activeElement.blur(); +}; + +export default blurActiveElement;