Revert "[phase2] fix delete modal flicker"

src/components/ConfirmModal.tsx

@@ -68,12 +68,6 @@ 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({
@@ -97,7 +91,6 @@ function ConfirmModal({
     isVisible,
     onConfirm,
     image,
-    shouldEnableNewFocusManagement,
 }: ConfirmModalProps) {
     const {isSmallScreenWidth} = useResponsiveLayout();
     const styles = useThemeStyles();
@@ -111,7 +104,6 @@ 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

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

src/components/Modal/types.ts

@@ -69,9 +69,6 @@ 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

@@ -359,7 +359,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 confirmText={translate('iou.cancelPayment')}
                 cancelText={translate('common.dismiss')}
                 danger
-                shouldEnableNewFocusManagement
             />
             <ConfirmModal
                 title={translate('iou.deleteExpense')}
@@ -370,7 +369,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 confirmText={translate('common.delete')}
                 cancelText={translate('common.cancel')}
                 danger
-                shouldEnableNewFocusManagement
             />
         </View>
     );

src/components/MoneyRequestHeader.tsx

@@ -258,7 +258,6 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
                 confirmText={translate('common.delete')}
                 cancelText={translate('common.cancel')}
                 danger
-                shouldEnableNewFocusManagement
             />
             {isSmallScreenWidth && shouldShowHoldMenu && (
                 <ProcessMoneyRequestHoldMenu

src/components/PopoverMenu.tsx

@@ -73,12 +73,6 @@ 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({
@@ -100,7 +94,6 @@ function PopoverMenu({
     disableAnimation = true,
     withoutOverlay = false,
     shouldSetModalVisibility = true,
-    shouldEnableNewFocusManagement,
 }: PopoverMenuProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -208,7 +201,6 @@ function PopoverMenu({
             fromSidebarMediumScreen={fromSidebarMediumScreen}
             withoutOverlay={withoutOverlay}
             shouldSetModalVisibility={shouldSetModalVisibility}
-            shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
         >
             <View style={isSmallScreenWidth ? {} : styles.createMenuContainer}>
                 {!!headerText && enteredSubMenuIndexes.length === 0 && <Text style={[styles.createMenuHeaderText, styles.ph5, styles.pv3]}>{headerText}</Text>}

src/components/PopoverWithMeasuredContent.tsx

@@ -4,7 +4,6 @@ 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';
@@ -58,7 +57,6 @@ function PopoverWithMeasuredContent({
     },
     shoudSwitchPositionIfOverflow = false,
     shouldHandleNavigationBack = false,
-    shouldEnableNewFocusManagement,
     ...props
 }: PopoverWithMeasuredContentProps) {
     const styles = useThemeStyles();
@@ -68,16 +66,11 @@ 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);
@@ -157,8 +150,6 @@ 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,7 +106,6 @@ function ThreeDotsMenu({
                 withoutOverlay={!shouldOverlay}
                 shouldSetModalVisibility={shouldSetModalVisibility}
                 anchorRef={buttonRef}
-                shouldEnableNewFocusManagement
             />
         </>
     );

src/libs/ComposerFocusManager.ts

@@ -92,10 +92,9 @@ 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) {
-        return;
+    if (activeModals.indexOf(id) < 0) {
+        activeModals.push(id);
     }
-    activeModals.push(id);
 
     if (shouldClearFocusWithType) {
         focusMap.forEach((value, key) => {

src/pages/home/HeaderView.tsx

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