Merge pull request #46507 from bernhardoj/fix/32116-keyboard-shows-wh…

…en-open-ba-page

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}>