[phase2] fix delete modal flicker

src/components/ConfirmModal.tsx

@@ -68,6 +68,12 @@ type ConfirmModalProps = {
 
     /** Image to display with content */
     image?: IconAsset;
+
+    /**
+     * Whether the modal should enable the new focus manager.
+     * We are attempting to migrate to a new refocus manager, adding this property for gradual migration.
+     * */
+    shouldEnableNewFocusManagement?: boolean;
 };
 
 function ConfirmModal({
@@ -91,6 +97,7 @@ function ConfirmModal({
     isVisible,
     onConfirm,
     image,
+    shouldEnableNewFocusManagement,
 }: ConfirmModalProps) {
     const {isSmallScreenWidth} = useWindowDimensions();
     const styles = useThemeStyles();
@@ -104,6 +111,7 @@ function ConfirmModal({
             onModalHide={onModalHide}
             type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
             innerContainerStyle={image ? styles.pt0 : {}}
+            shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
         >
             <ConfirmContent
                 title={title}

src/components/Modal/BaseModal.tsx

@@ -44,6 +44,7 @@ function BaseModal(
         children,
         shouldUseCustomBackdrop = false,
         onBackdropPress,
+        modalId,
         shouldEnableNewFocusManagement = false,
         restoreFocusType,
         shouldUseModalPaddingStyle = true,
@@ -61,13 +62,13 @@ function BaseModal(
     const isVisibleRef = useRef(isVisible);
     const wasVisible = usePrevious(isVisible);
 
-    const modalId = useMemo(() => ComposerFocusManager.getId(), []);
-    const saveFocusState = () => {
+    const uniqueModalId = useMemo(() => modalId ?? ComposerFocusManager.getId(), [modalId]);
+    const saveFocusState = useCallback(() => {
         if (shouldEnableNewFocusManagement) {
-            ComposerFocusManager.saveFocusState(modalId);
+            ComposerFocusManager.saveFocusState(uniqueModalId);
         }
-        ComposerFocusManager.resetReadyToFocus(modalId);
-    };
+        ComposerFocusManager.resetReadyToFocus(uniqueModalId);
+    }, [shouldEnableNewFocusManagement, uniqueModalId]);
 
     /**
      * Hides modal
@@ -85,9 +86,9 @@ function BaseModal(
                 onModalHide();
             }
             Modal.onModalDidClose();
-            ComposerFocusManager.refocusAfterModalFullyClosed(modalId, restoreFocusType);
+            ComposerFocusManager.refocusAfterModalFullyClosed(uniqueModalId, restoreFocusType);
         },
-        [shouldSetModalVisibility, onModalHide, restoreFocusType, modalId],
+        [shouldSetModalVisibility, onModalHide, restoreFocusType, uniqueModalId],
     );
 
     useEffect(() => {
@@ -139,7 +140,7 @@ function BaseModal(
     };
 
     const handleDismissModal = () => {
-        ComposerFocusManager.setReadyToFocus(modalId);
+        ComposerFocusManager.setReadyToFocus(uniqueModalId);
     };
 
     const {

src/components/Modal/types.ts

@@ -69,6 +69,9 @@ type BaseModalProps = Partial<ModalProps> & {
     /** Should we use a custom backdrop for the modal? (This prevents focus issues on desktop) */
     shouldUseCustomBackdrop?: boolean;
 
+    /** unique id for the modal */
+    modalId?: number;
+
     /**
      * Whether the modal should enable the new focus manager.
      * We are attempting to migrate to a new refocus manager, adding this property for gradual migration.

src/components/MoneyReportHeader.tsx

@@ -324,6 +324,7 @@ function MoneyReportHeader({
                 confirmText={translate('iou.cancelPayment')}
                 cancelText={translate('common.dismiss')}
                 danger
+                shouldEnableNewFocusManagement
             />
             <ConfirmModal
                 title={translate('iou.deleteExpense')}
@@ -334,6 +335,7 @@ function MoneyReportHeader({
                 confirmText={translate('common.delete')}
                 cancelText={translate('common.cancel')}
                 danger
+                shouldEnableNewFocusManagement
             />
         </View>
     );

src/components/MoneyRequestHeader.tsx

@@ -250,6 +250,7 @@ function MoneyRequestHeader({
                 confirmText={translate('common.delete')}
                 cancelText={translate('common.cancel')}
                 danger
+                shouldEnableNewFocusManagement
             />
             {shouldUseNarrowLayout && shouldShowHoldMenu && (
                 <ProcessMoneyRequestHoldMenu

src/components/PopoverMenu.tsx

@@ -68,6 +68,12 @@ type PopoverMenuProps = Partial<PopoverModalProps> & {
 
     /** Whether we want to show the popover on the right side of the screen */
     fromSidebarMediumScreen?: boolean;
+
+    /**
+     * Whether the modal should enable the new focus manager.
+     * We are attempting to migrate to a new refocus manager, adding this property for gradual migration.
+     * */
+    shouldEnableNewFocusManagement?: boolean;
 };
 
 function PopoverMenu({
@@ -89,6 +95,7 @@ function PopoverMenu({
     disableAnimation = true,
     withoutOverlay = false,
     shouldSetModalVisibility = true,
+    shouldEnableNewFocusManagement,
 }: PopoverMenuProps) {
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -189,6 +196,7 @@ function PopoverMenu({
             fromSidebarMediumScreen={fromSidebarMediumScreen}
             withoutOverlay={withoutOverlay}
             shouldSetModalVisibility={shouldSetModalVisibility}
+            shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
         >
             <View style={isSmallScreenWidth ? {} : styles.createMenuContainer}>
                 {!!headerText && <Text style={[styles.createMenuHeaderText, styles.ml3]}>{headerText}</Text>}

src/components/PopoverWithMeasuredContent.tsx

@@ -4,6 +4,7 @@ import type {LayoutChangeEvent} from 'react-native';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import ComposerFocusManager from '@libs/ComposerFocusManager';
 import PopoverWithMeasuredContentUtils from '@libs/PopoverWithMeasuredContentUtils';
 import CONST from '@src/CONST';
 import type {AnchorDimensions, AnchorPosition} from '@src/styles';
@@ -57,6 +58,7 @@ function PopoverWithMeasuredContent({
     },
     shoudSwitchPositionIfOverflow = false,
     shouldHandleNavigationBack = false,
+    shouldEnableNewFocusManagement,
     ...props
 }: PopoverWithMeasuredContentProps) {
     const styles = useThemeStyles();
@@ -66,11 +68,16 @@ function PopoverWithMeasuredContent({
     const [isContentMeasured, setIsContentMeasured] = useState(popoverWidth > 0 && popoverHeight > 0);
     const [isPopoverVisible, setIsPopoverVisible] = useState(false);
 
+    const modalId = useMemo(() => ComposerFocusManager.getId(), []);
+
     /**
      * When Popover becomes visible, we need to recalculate the Dimensions.
      * Skip render on Popover until recalculations are done by setting isContentMeasured to false as early as possible.
      */
     if (!isPopoverVisible && isVisible) {
+        if (shouldEnableNewFocusManagement) {
+            ComposerFocusManager.saveFocusState(modalId);
+        }
         // When Popover is shown recalculate
         setIsContentMeasured(popoverDimensions.width > 0 && popoverDimensions.height > 0);
         setIsPopoverVisible(true);
@@ -150,6 +157,8 @@ function PopoverWithMeasuredContent({
             statusBarTranslucent={statusBarTranslucent}
             avoidKeyboard={avoidKeyboard}
             hideModalContentWhileAnimating={hideModalContentWhileAnimating}
+            modalId={modalId}
+            shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             anchorPosition={shiftedAnchorPosition}

src/components/ThreeDotsMenu/index.tsx

@@ -106,6 +106,7 @@ function ThreeDotsMenu({
                 withoutOverlay={!shouldOverlay}
                 shouldSetModalVisibility={shouldSetModalVisibility}
                 anchorRef={buttonRef}
+                shouldEnableNewFocusManagement
             />
         </>
     );

src/libs/ComposerFocusManager.ts

@@ -92,9 +92,10 @@ function saveFocusState(id: ModalId, isInUploadingContext = false, shouldClearFo
     // For popoverWithoutOverlay, react calls autofocus before useEffect.
     const input = focusedInput ?? activeInput;
     focusedInput = null;
-    if (activeModals.indexOf(id) < 0) {
-        activeModals.push(id);
+    if (activeModals.indexOf(id) >= 0) {
+        return;
     }
+    activeModals.push(id);
 
     if (shouldClearFocusWithType) {
         focusMap.forEach((value, key) => {

src/pages/home/HeaderView.tsx

@@ -370,6 +370,7 @@ function HeaderView({
                                 confirmText={translate('common.delete')}
                                 cancelText={translate('common.cancel')}
                                 danger
+                                shouldEnableNewFocusManagement
                             />
                         </>
                     )}