Fix/focus managment in one place

src/ONYXKEYS.ts

@@ -67,9 +67,6 @@ const ONYXKEYS = {
     // draft status in custom mode (date and time)
     STATUS_DRAFT_CUSTOM_CLEAR_AFTER_DATE: 'statusDraftCustomClearAfterDate',
 
-    // keep edit message focus state
-    INPUT_FOCUSED: 'inputFocused',
-
     /** Contains all the personalDetails the user has access to, keyed by accountID */
     PERSONAL_DETAILS_LIST: 'personalDetailsList',
 
@@ -1190,7 +1187,6 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NEW_GROUP_CHAT_DRAFT]: OnyxTypes.NewGroupChatDraft;
     [ONYXKEYS.CUSTOM_STATUS_DRAFT]: OnyxTypes.CustomStatusDraft;
     [ONYXKEYS.STATUS_DRAFT_CUSTOM_CLEAR_AFTER_DATE]: string;
-    [ONYXKEYS.INPUT_FOCUSED]: boolean;
     [ONYXKEYS.PERSONAL_DETAILS_LIST]: OnyxTypes.PersonalDetailsList;
     [ONYXKEYS.PRIVATE_PERSONAL_DETAILS]: OnyxTypes.PrivatePersonalDetails;
     [ONYXKEYS.PERSONAL_DETAILS_METADATA]: Record<string, OnyxTypes.PersonalDetailsMetadata>;

src/components/AddPaymentMethodMenu.tsx

@@ -133,7 +133,6 @@ function AddPaymentMethodMenu({
                 //     },
                 // ],
             ]}
-            shouldEnableNewFocusManagement
             restoreFocusType={restoreFocusType}
         />
     );

src/components/BaseMiniContextMenuItem.tsx

@@ -3,9 +3,9 @@ import type {PressableStateCallbackType} from 'react-native';
 import {View} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
+import ComposerFocusManager from '@libs/ComposerFocusManager';
 import DomUtils from '@libs/DomUtils';
 import getButtonState from '@libs/getButtonState';
-import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type WithSentryLabel from '@src/types/utils/SentryLabel';
@@ -68,7 +68,7 @@ function BaseMiniContextMenuItem({
                 ref={ref}
                 onPress={onPress}
                 onMouseDown={(event) => {
-                    if (!ReportActionComposeFocusManager.isFocused() && !ReportActionComposeFocusManager.isEditFocused()) {
+                    if (!ComposerFocusManager.isComposerFocused() && !ComposerFocusManager.isEditComposerFocused()) {
                         const activeElement = DomUtils.getActiveElement();
                         if (activeElement instanceof HTMLElement) {
                             activeElement?.blur();

src/components/ConfirmModal.tsx

@@ -98,12 +98,6 @@ type ConfirmModalProps = {
     /** Styles for the image */
     imageStyles?: StyleProp<ViewStyle>;
 
-    /**
-     * 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;
-
     /** How to re-focus after the modal is dismissed */
     restoreFocusType?: BaseModalProps['restoreFocusType'];
 
@@ -147,7 +141,6 @@ function ConfirmModal({
     shouldShowDismissIcon,
     titleContainerStyles,
     shouldReverseStackedButtons,
-    shouldEnableNewFocusManagement,
     restoreFocusType,
     isConfirmLoading,
     shouldHandleNavigationBack,
@@ -175,7 +168,6 @@ function ConfirmModal({
             onModalHide={onModalHide}
             type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
             innerContainerStyle={styles.pv0}
-            shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
             restoreFocusType={restoreFocusType}
             shouldHandleNavigationBack={shouldHandleNavigationBack}
             shouldIgnoreBackHandlerDuringTransition={shouldIgnoreBackHandlerDuringTransition}

src/components/CurrencyPicker.tsx

@@ -71,7 +71,6 @@ function CurrencyPicker({label, value, errorText, headerContent, excludeCurrenci
                 isVisible={isPickerVisible}
                 onClose={hidePickerModal}
                 onModalHide={hidePickerModal}
-                shouldEnableNewFocusManagement
                 onBackdropPress={Navigation.dismissModal}
                 shouldUseModalPaddingStyle={false}
                 shouldHandleNavigationBack

src/components/DatePicker/DatePickerModal.tsx

@@ -72,7 +72,6 @@ function DatePickerModal({
             anchorAlignment={DEFAULT_ANCHOR_ORIGIN}
             restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
             shouldSwitchPositionIfOverflow
-            shouldEnableNewFocusManagement
             shouldMeasureAnchorPositionFromTop={shouldPositionFromTop}
             shouldSkipRemeasurement
             forwardedFSClass={forwardedFSClass}

src/components/EmojiPicker/EmojiPicker.tsx

@@ -15,10 +15,9 @@ import blurActiveElement from '@libs/Accessibility/blurActiveElement';
 import type {AnchorOrigin, EmojiPickerOnModalHide, EmojiPickerRef, EmojiPopoverAnchor, OnEmojiSelected, ShowEmojiPickerOptions} from '@libs/actions/EmojiPickerAction';
 import {isMobileChrome} from '@libs/Browser';
 import calculateAnchorPosition from '@libs/calculateAnchorPosition';
+import ComposerFocusManager from '@libs/ComposerFocusManager';
+import type {ComposerType} from '@libs/ComposerFocusManager';
 import DomUtils from '@libs/DomUtils';
-import refocusComposerAfterPreventFirstResponder from '@libs/refocusComposerAfterPreventFirstResponder';
-import type {ComposerType} from '@libs/ReportActionComposeFocusManager';
-import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import {close} from '@userActions/Modal';
 import CONST from '@src/CONST';
 import KeyboardUtils from '@src/utils/keyboard';
@@ -97,11 +96,7 @@ function EmojiPicker({viewportOffsetTop, ref}: EmojiPickerProps) {
         });
 
         composerToRefocusOnClose.current = composerToRefocusOnCloseValue;
-        if (composerToRefocusOnCloseValue === 'main') {
-            ReportActionComposeFocusManager.preventComposerFocusOnFirstResponderOnce();
-        } else if (composerToRefocusOnCloseValue === 'edit') {
-            ReportActionComposeFocusManager.preventEditComposerFocusOnFirstResponderOnce();
-        }
+        ComposerFocusManager.preventComposerFocusOnFirstResponderOnce(composerToRefocusOnCloseValue);
 
         onModalHide.current = onModalHideValue;
         onEmojiSelected.current = onEmojiSelectedValue;
@@ -164,7 +159,7 @@ function EmojiPicker({viewportOffsetTop, ref}: EmojiPickerProps) {
     const handleModalHide = () => {
         onModalHide.current();
 
-        refocusComposerAfterPreventFirstResponder(composerToRefocusOnClose.current).then(() => {
+        ComposerFocusManager.refocusComposerAfterPreventFirstResponder(composerToRefocusOnClose.current).then(() => {
             composerToRefocusOnClose.current = undefined;
         });
     };
@@ -259,7 +254,6 @@ function EmojiPicker({viewportOffsetTop, ref}: EmojiPickerProps) {
             anchorDimensions={emojiAnchorDimension.current}
             avoidKeyboard
             shouldSwitchPositionIfOverflow
-            shouldEnableNewFocusManagement
             restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
             shouldSkipRemeasurement
         >

src/components/FocusTrap/FocusTrapForModal/index.web.tsx

@@ -2,7 +2,7 @@ import {FocusTrap} from 'focus-trap-react';
 import React from 'react';
 import sharedTrapStack from '@components/FocusTrap/sharedTrapStack';
 import blurActiveElement from '@libs/Accessibility/blurActiveElement';
-import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
+import ComposerFocusManager from '@libs/ComposerFocusManager';
 import type FocusTrapForModalProps from './FocusTrapForModalProps';
 
 function FocusTrapForModal({children, active, initialFocus = false, shouldPreventScroll = false, shouldReturnFocus = true}: FocusTrapForModalProps) {
@@ -17,7 +17,7 @@ function FocusTrapForModal({children, active, initialFocus = false, shouldPreven
                 initialFocus,
                 fallbackFocus: document.body,
                 setReturnFocus: (element) => {
-                    if (ReportActionComposeFocusManager.isFocused()) {
+                    if (ComposerFocusManager.isComposerFocused()) {
                         return false;
                     }
                     if (shouldReturnFocus) {

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -20,13 +20,13 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import ComposerFocusManager from '@libs/ComposerFocusManager';
 import DateUtils from '@libs/DateUtils';
 import DomUtils from '@libs/DomUtils';
 import {containsCustomEmoji as containsCustomEmojiUtils, containsOnlyCustomEmoji} from '@libs/EmojiUtils';
 import FS from '@libs/Fullstory';
 import {shouldOptionShowTooltip, shouldUseBoldText} from '@libs/OptionsListUtils';
 import Performance from '@libs/Performance';
-import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import {isAdminRoom, isChatUsedForOnboarding as isChatUsedForOnboardingReportUtils, isConciergeChatReport, isGroupChat, isOneOnOneChat, isSystemChat} from '@libs/ReportUtils';
 import {startSpan} from '@libs/telemetry/activeSpans';
 import TextWithEmojiFragment from '@pages/home/report/comment/TextWithEmojiFragment';
@@ -184,7 +184,7 @@ function OptionRowLHN({
 
         event?.preventDefault();
         // Enable Composer to focus on clicking the same chat after opening the context menu.
-        ReportActionComposeFocusManager.focus();
+        ComposerFocusManager.focusComposer();
         hideProductTrainingTooltip();
         onSelectRow(optionItem, popoverAnchor);
     };

src/components/Modal/BaseModal.tsx

@@ -53,7 +53,6 @@ function BaseModal({
     shouldUseCustomBackdrop = false,
     onBackdropPress,
     modalId,
-    shouldEnableNewFocusManagement = false,
     restoreFocusType,
     shouldUseModalPaddingStyle = true,
     initialFocus = false,
@@ -97,11 +96,9 @@ function BaseModal({
 
     const uniqueModalId = useMemo(() => modalId ?? ComposerFocusManager.getId(), [modalId]);
     const saveFocusState = useCallback(() => {
-        if (shouldEnableNewFocusManagement) {
-            ComposerFocusManager.saveFocusState(uniqueModalId);
-        }
+        ComposerFocusManager.saveFocusState(uniqueModalId);
         ComposerFocusManager.resetReadyToFocus(uniqueModalId);
-    }, [shouldEnableNewFocusManagement, uniqueModalId]);
+    }, [uniqueModalId]);
     /**
      * Hides modal
      * @param callHideCallback - Should we call the onModalHide callback
@@ -367,7 +364,6 @@ function BaseModal({
                         customBackdrop={shouldUseCustomBackdrop ? <Overlay onPress={handleBackdropPress} /> : undefined}
                         type={type}
                         shouldIgnoreBackHandlerDuringTransition={shouldIgnoreBackHandlerDuringTransition}
-                        shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
                     >
                         <Animated.View
                             onLayout={onViewLayout}

src/components/Modal/ReanimatedModal/index.tsx

@@ -46,7 +46,6 @@ function ReanimatedModal({
     shouldPreventScrollOnFocus,
     initialFocus,
     shouldIgnoreBackHandlerDuringTransition = false,
-    shouldEnableNewFocusManagement,
     ...props
 }: ReanimatedModalProps) {
     const [isVisibleState, setIsVisibleState] = useState(isVisible);
@@ -242,7 +241,7 @@ function ReanimatedModal({
                     <FocusTrapForModal
                         active={modalVisibility}
                         initialFocus={initialFocus}
-                        shouldReturnFocus={!shouldEnableNewFocusManagement}
+                        shouldReturnFocus={false}
                         shouldPreventScroll={shouldPreventScrollOnFocus}
                     >
                         {isVisibleState && containerView}

src/components/Modal/ReanimatedModal/types.ts

@@ -137,12 +137,6 @@ type ReanimatedModalProps = ViewProps &
         /** Whether to use a custom backdrop for the modal? (This prevents focus issues on desktop) */
         initialFocus?: FocusTrapOptions['initialFocus'];
 
-        /**
-         * 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;
-
         /** Whether to ignore the back handler during transition */
         shouldIgnoreBackHandlerDuringTransition?: boolean;
     };

src/components/Modal/types.ts

@@ -73,12 +73,6 @@ type BaseModalProps = Partial<ReanimatedModalProps> &
         /** 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.
-         * */
-        shouldEnableNewFocusManagement?: boolean;
-
         /** How to re-focus after the modal is dismissed */
         restoreFocusType?: ValueOf<typeof CONST.MODAL.RESTORE_FOCUS_TYPE>;
 

src/components/MoneyRequestHeader.tsx

@@ -576,7 +576,6 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
                 confirmText={translate('common.delete')}
                 cancelText={translate('common.cancel')}
                 danger
-                shouldEnableNewFocusManagement
             />
             {!!rejectModalAction && (
                 <HoldOrRejectEducationalModal

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

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

src/components/PopoverMenu.tsx

@@ -126,12 +126,6 @@ type PopoverMenuProps = Partial<ModalAnimationProps> & {
     /** 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;
-
     /** How to re-focus after the modal is dismissed */
     restoreFocusType?: BaseModalProps['restoreFocusType'];
 
@@ -270,7 +264,6 @@ function BasePopoverMenu({
     disableAnimation = true,
     withoutOverlay = false,
     shouldSetModalVisibility = true,
-    shouldEnableNewFocusManagement,
     restoreFocusType,
     shouldShowSelectedItemCheck = false,
     containerStyles,
@@ -559,15 +552,14 @@ function BasePopoverMenu({
             fromSidebarMediumScreen={fromSidebarMediumScreen}
             withoutOverlay={withoutOverlay}
             shouldSetModalVisibility={shouldSetModalVisibility}
-            shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
             restoreFocusType={restoreFocusType}
             innerContainerStyle={{...styles.pv0, ...innerContainerStyle}}
             shouldUseModalPaddingStyle={shouldUseModalPaddingStyle}
             testID={testID}
         >
             <FocusTrapForModal
                 active={isVisible}
-                shouldReturnFocus={!shouldEnableNewFocusManagement}
+                shouldReturnFocus={false}
             >
                 <View
                     onLayout={onLayout}

src/components/PopoverWithMeasuredContent/PopoverWithMeasuredContentBase.tsx

@@ -45,7 +45,6 @@ function PopoverWithMeasuredContentBase({
     },
     shouldSwitchPositionIfOverflow = false,
     shouldHandleNavigationBack = false,
-    shouldEnableNewFocusManagement,
     shouldMeasureAnchorPositionFromTop = false,
     shouldSkipRemeasurement = false,
     ...props
@@ -63,13 +62,6 @@ function PopoverWithMeasuredContentBase({
     const hasStaticDimensions = popoverDimensions.width > 0 && popoverDimensions.height > 0;
     const modalId = useMemo(() => ComposerFocusManager.getId(), []);
 
-    useEffect(() => {
-        if (prevIsVisible || !isVisible || !shouldEnableNewFocusManagement) {
-            return;
-        }
-        ComposerFocusManager.saveFocusState(modalId);
-    }, [isVisible, shouldEnableNewFocusManagement, prevIsVisible, modalId]);
-
     if (!prevIsVisible && isVisible && isContentMeasured && !shouldSkipRemeasurement) {
         // Check if anything significant changed that would require re-measurement
         const hasAnchorPositionChanged = !deepEqual(prevAnchorPosition, anchorPosition);
@@ -203,7 +195,6 @@ function PopoverWithMeasuredContentBase({
             avoidKeyboard={avoidKeyboard}
             hideModalContentWhileAnimating={hideModalContentWhileAnimating}
             modalId={modalId}
-            shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             anchorPosition={shiftedAnchorPosition}

src/components/RequireTwoFactorAuthenticationModal.tsx

@@ -23,15 +23,9 @@ type RequireTwoFactorAuthenticationModalProps = {
 
     /** Describe what is showing */
     description: string;
-
-    /**
-     * 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 RequireTwoFactorAuthenticationModal({onCancel = () => {}, description, isVisible, onSubmit, shouldEnableNewFocusManagement}: RequireTwoFactorAuthenticationModalProps) {
+function RequireTwoFactorAuthenticationModal({onCancel = () => {}, description, isVisible, onSubmit}: RequireTwoFactorAuthenticationModalProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -43,7 +37,6 @@ function RequireTwoFactorAuthenticationModal({onCancel = () => {}, description,
             isVisible={isVisible}
             type={shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
             innerContainerStyle={{...styles.pb5, ...styles.pt0, ...styles.boxShadowNone}}
-            shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
         >
             <View>
                 <View style={[styles.cardSectionIllustration, styles.alignItemsCenter, StyleUtils.getBackgroundColorStyle(LottieAnimations.Safe.backgroundColor)]}>

src/components/Search/FilterDropdowns/DropdownButton.tsx

@@ -160,7 +160,6 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medi
                 anchorPosition={popoverTriggerPosition}
                 anchorAlignment={ANCHOR_ORIGIN}
                 restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
-                shouldEnableNewFocusManagement
                 shouldMeasureAnchorPositionFromTop={false}
                 outerStyle={{...StyleUtils.getOuterModalStyle(windowHeight, viewportOffsetTop), ...containerStyles}}
                 // This must be false because we dont want the modal to close if we open the RHP for selections

src/components/SidePanel/Concierge/index.tsx

@@ -12,7 +12,7 @@ const CONCIERGE_REPORT_KEY = 'Report-Concierge-Key';
 function Concierge({navigation}: Pick<ExtraContentProps, 'navigation'>) {
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID, {canBeMissing: true});
     // eslint-disable-next-line react/jsx-no-constructed-context-values
-    const route = !!conciergeReportID && ({name: SCREENS.REPORT, params: {reportID: conciergeReportID}, key: CONCIERGE_REPORT_KEY} as const);
+    const route = !!conciergeReportID && ({name: SCREENS.REPORT, params: {reportID: '803938620872427'}, key: CONCIERGE_REPORT_KEY} as const);
 
     if (!route) {
         return null;