Fix keyboard shows briefly when open BA page from payment method popover menu

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<BaseModalProps['restoreFocusType']>();
 
  // 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 (
  <PopoverMenu
  isVisible={isVisible}
- onClose={onClose}
+ onClose={() => {
+ 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}
  />
  );
 }

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<PopoverModalProps> & {
  * 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}
  >
  <FocusTrapForModal active={isVisible}>
  <View style={isSmallScreenWidth ? {} : styles.createMenuContainer}>