diff --git a/src/components/AddPaymentMethodMenu.tsx b/src/components/AddPaymentMethodMenu.tsx index bd437cbb062df..5621c031f9598 100644 --- a/src/components/AddPaymentMethodMenu.tsx +++ b/src/components/AddPaymentMethodMenu.tsx @@ -1,5 +1,5 @@ import type {RefObject} from 'react'; -import React, {useEffect} from 'react'; +import React, {useEffect, useState} from 'react'; import type {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; @@ -13,6 +13,7 @@ import type {Report, Session} from '@src/types/onyx'; import type AnchorAlignment from '@src/types/utils/AnchorAlignment'; import * as Expensicons from './Icon/Expensicons'; import type {PaymentMethod} from './KYCWall/types'; +import type BaseModalProps from './Modal/types'; import PopoverMenu from './PopoverMenu'; type AddPaymentMethodMenuOnyxProps = { @@ -61,6 +62,7 @@ function AddPaymentMethodMenu({ shouldShowPersonalBankAccountOption = false, }: AddPaymentMethodMenuProps) { const {translate} = useLocalize(); + const [restoreFocusType, setRestoreFocusType] = useState(); // Users can choose to pay with business bank account in case of Expense reports or in case of P2P IOU report // which then starts a bottom up flow and creates a Collect workspace where the payer is an admin and payee is an employee. @@ -88,11 +90,17 @@ function AddPaymentMethodMenu({ return ( { + setRestoreFocusType(undefined); + onClose(); + }} anchorPosition={anchorPosition} anchorAlignment={anchorAlignment} anchorRef={anchorRef} - onItemSelected={onClose} + onItemSelected={() => { + setRestoreFocusType(CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE); + onClose(); + }} menuItems={[ ...(canUsePersonalBankAccount ? [ @@ -124,6 +132,8 @@ function AddPaymentMethodMenu({ // ], ]} withoutOverlay + shouldEnableNewFocusManagement + restoreFocusType={restoreFocusType} /> ); } diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index ad74a2730d6a7..8fb22a57a4291 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -16,6 +16,7 @@ import FocusTrapForModal from './FocusTrap/FocusTrapForModal'; import * as Expensicons from './Icon/Expensicons'; import type {MenuItemProps} from './MenuItem'; import MenuItem from './MenuItem'; +import type BaseModalProps from './Modal/types'; import PopoverWithMeasuredContent from './PopoverWithMeasuredContent'; import Text from './Text'; @@ -83,6 +84,9 @@ type PopoverMenuProps = Partial & { * We are attempting to migrate to a new refocus manager, adding this property for gradual migration. * */ shouldEnableNewFocusManagement?: boolean; + + /** How to re-focus after the modal is dismissed */ + restoreFocusType?: BaseModalProps['restoreFocusType']; }; function PopoverMenu({ @@ -106,6 +110,7 @@ function PopoverMenu({ withoutOverlay = false, shouldSetModalVisibility = true, shouldEnableNewFocusManagement, + restoreFocusType, }: PopoverMenuProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -218,6 +223,7 @@ function PopoverMenu({ withoutOverlay={withoutOverlay} shouldSetModalVisibility={shouldSetModalVisibility} shouldEnableNewFocusManagement={shouldEnableNewFocusManagement} + restoreFocusType={restoreFocusType} >