diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx index 23a08b4306e3..1403f6a7ed42 100755 --- a/src/components/ConfirmModal.tsx +++ b/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} > {(reportField.type === 'text' || isReportFieldTitle) && ( diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx index 6c0eae98fb85..7e122c8cb32d 100644 --- a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx +++ b/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(); 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); + }, }, ]} /> @@ -186,6 +192,8 @@ function IOURequestStepWaypoint({ confirmText={translate('common.delete')} cancelText={translate('common.cancel')} danger + shouldEnableNewFocusManagement + restoreFocusType={restoreFocusType} />