Merge pull request #43041 from ntdiary/fix-modal-keyboard

enable new focus management for waypoint and report field page

src/components/ConfirmModal.tsx

@@ -7,6 +7,7 @@ import CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
 import ConfirmContent from './ConfirmContent';
 import Modal from './Modal';
+import type BaseModalProps from './Modal/types';
 
 type ConfirmModalProps = {
     /** Title of the modal */
@@ -74,6 +75,9 @@ type ConfirmModalProps = {
      * 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 ConfirmModal({
@@ -98,6 +102,7 @@ function ConfirmModal({
     onConfirm,
     image,
     shouldEnableNewFocusManagement,
+    restoreFocusType,
 }: ConfirmModalProps) {
     const {isSmallScreenWidth} = useResponsiveLayout();
     const styles = useThemeStyles();
@@ -112,6 +117,7 @@ function ConfirmModal({
             type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
             innerContainerStyle={image ? styles.pt0 : {}}
             shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
+            restoreFocusType={restoreFocusType}
         >
             <ConfirmContent
                 title={title}

src/pages/EditReportFieldPage.tsx

@@ -123,6 +123,7 @@ function EditReportFieldPage({route, policy, report}: EditReportFieldPageProps)
                 confirmText={translate('common.delete')}
                 cancelText={translate('common.cancel')}
                 danger
+                shouldEnableNewFocusManagement
             />
 
             {(reportField.type === 'text' || isReportFieldTitle) && (

src/pages/iou/request/step/IOURequestStepWaypoint.tsx

@@ -13,6 +13,7 @@ import InputWrapperWithRef from '@components/Form/InputWrapper';
 import type {FormOnyxValues} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
+import type BaseModalProps from '@components/Modal/types';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useLocationBias from '@hooks/useLocationBias';
@@ -58,6 +59,7 @@ function IOURequestStepWaypoint({
     const styles = useThemeStyles();
     const {windowWidth} = useWindowDimensions();
     const [isDeleteStopModalOpen, setIsDeleteStopModalOpen] = useState(false);
+    const [restoreFocusType, setRestoreFocusType] = useState<BaseModalProps['restoreFocusType']>();
     const navigation = useNavigation();
     const isFocused = navigation.isFocused();
     const {translate} = useLocalize();
@@ -130,6 +132,7 @@ function IOURequestStepWaypoint({
 
     const deleteStopAndHideModal = () => {
         Transaction.removeWaypoint(transaction, pageIndex, action === CONST.IOU.ACTION.CREATE);
+        setRestoreFocusType(CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE);
         setIsDeleteStopModalOpen(false);
         Navigation.goBack(ROUTES.MONEY_REQUEST_STEP_DISTANCE.getRoute(action, iouType, transactionID, reportID));
     };
@@ -172,7 +175,10 @@ function IOURequestStepWaypoint({
                         {
                             icon: Expensicons.Trashcan,
                             text: translate('distance.deleteWaypoint'),
-                            onSelected: () => setIsDeleteStopModalOpen(true),
+                            onSelected: () => {
+                                setRestoreFocusType(undefined);
+                                setIsDeleteStopModalOpen(true);
+                            },
                         },
                     ]}
                 />
@@ -187,6 +193,8 @@ function IOURequestStepWaypoint({
                     cancelText={translate('common.cancel')}
                     shouldEnableNewFocusManagement
                     danger
+                    shouldEnableNewFocusManagement
+                    restoreFocusType={restoreFocusType}
                 />
                 <FormProvider
                     style={[styles.flexGrow1, styles.mh5]}