Try to refactor the logic regarding refocusing when the modal is closed

src/CONST.ts

@@ -715,6 +715,15 @@ const CONST = {
             RIGHT: 'right',
         },
         POPOVER_MENU_PADDING: 8,
+        BUSINESS_TYPE: {
+            DEFAULT: 'default',
+            ATTACHMENT: 'attachment',
+        },
+        RESTORE_FOCUS_TYPE: {
+            DEFAULT: 'default',
+            DELETE: 'delete',
+            PRESERVE: 'preserve',
+        },
     },
     TIMING: {
         CALCULATE_MOST_RECENT_LAST_MODIFIED_ACTION: 'calc_most_recent_last_modified_action',

src/components/AttachmentPicker/index.native.js

@@ -103,6 +103,7 @@ const getDataForUpload = (fileData) => {
 function AttachmentPicker({type, children, shouldHideCameraOption}) {
     const styles = useThemeStyles();
     const [isVisible, setIsVisible] = useState(false);
+    const [restoreFocusType, setRestoreFocusType] = useState();
 
     const completeAttachmentSelection = useRef();
     const onModalHide = useRef();
@@ -305,12 +306,14 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
     return (
         <>
             <Popover
+                restoreFocusType={restoreFocusType}
                 onClose={() => {
                     close();
                     onCanceled.current();
                 }}
                 isVisible={isVisible}
                 anchorPosition={styles.createMenuPosition}
+                onModalShow={() => setRestoreFocusType(CONST.MODAL.RESTORE_FOCUS_TYPE.DEFAULT)}
                 onModalHide={onModalHide.current}
             >
                 <View style={!isSmallScreenWidth && styles.createMenuContainer}>
@@ -319,7 +322,10 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
                             key={item.textTranslationKey}
                             icon={item.icon}
                             title={translate(item.textTranslationKey)}
-                            onPress={() => selectItem(item)}
+                            onPress={() => {
+                                setRestoreFocusType(CONST.MODAL.RESTORE_FOCUS_TYPE.PRESERVE);
+                                selectItem(item);
+                            }}
                             focused={focusedIndex === menuIndex}
                         />
                     ))}

src/components/Composer/index.native.tsx

@@ -4,7 +4,6 @@ import type {TextInput} from 'react-native';
 import {StyleSheet} from 'react-native';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import RNTextInput from '@components/RNTextInput';
-import useResetComposerFocus from '@hooks/useResetComposerFocus';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -31,7 +30,6 @@ function Composer(
     ref: ForwardedRef<TextInput>,
 ) {
     const textInput = useRef<AnimatedTextInputRef | null>(null);
-    const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -81,12 +79,6 @@ function Composer(
             /* eslint-disable-next-line react/jsx-props-no-spreading */
             {...props}
             readOnly={isDisabled}
-            onBlur={(e) => {
-                if (!isFocused) {
-                    shouldResetFocus.current = true; // detect the input is blurred when the page is hidden
-                }
-                props?.onBlur?.(e);
-            }}
         />
     );
 }

src/components/Composer/index.tsx

@@ -372,17 +372,7 @@ function Composer(
                 numberOfLines={numberOfLines}
                 disabled={isDisabled}
                 onKeyPress={handleKeyPress}
-                onFocus={(e) => {
-                    ReportActionComposeFocusManager.onComposerFocus(() => {
-                        if (!textInput.current) {
-                            return;
-                        }
-
-                        textInput.current.focus();
-                    });
-
-                    props.onFocus?.(e);
-                }}
+                onFocus={(e) => props.onFocus?.(e)}
             />
             {shouldCalculateCaretPosition && renderElementForCaretPosition}
         </>

src/components/ConfirmModal.tsx

@@ -1,6 +1,7 @@
 import type {ReactNode} from 'react';
 import React from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import type {ValueOf} from 'type-fest';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
@@ -64,6 +65,9 @@ type ConfirmModalProps = {
 
     /** Whether to stack the buttons */
     shouldStackButtons?: boolean;
+
+    /** How to re-focus after the modal is dismissed */
+    restoreFocusType?: ValueOf<typeof CONST.MODAL.RESTORE_FOCUS_TYPE>;
 };
 
 function ConfirmModal({
@@ -86,6 +90,7 @@ function ConfirmModal({
     shouldStackButtons = true,
     isVisible,
     onConfirm,
+    restoreFocusType,
 }: ConfirmModalProps) {
     const {isSmallScreenWidth} = useWindowDimensions();
 
@@ -97,6 +102,7 @@ function ConfirmModal({
             shouldSetModalVisibility={shouldSetModalVisibility}
             onModalHide={onModalHide}
             type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
+            restoreFocusType={restoreFocusType}
         >
             <ConfirmContent
                 title={title}

src/components/Modal/BaseModal.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
+import React, {forwardRef, useCallback, useContext, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
@@ -14,6 +14,8 @@ import useNativeDriver from '@libs/useNativeDriver';
 import variables from '@styles/variables';
 import * as Modal from '@userActions/Modal';
 import CONST from '@src/CONST';
+import {ModalBusinessTypeContext} from './ModalBusinessTypeProvider';
+import ModalContent from './ModalContent';
 import type BaseModalProps from './types';
 
 function BaseModal(
@@ -37,6 +39,8 @@ function BaseModal(
         animationOutTiming,
         statusBarTranslucent = true,
         onLayout,
+        restoreFocusType,
+        shouldClearFocusWithType = false,
         avoidKeyboard = false,
         children,
         shouldUseCustomBackdrop = false,
@@ -53,6 +57,13 @@ function BaseModal(
     const isVisibleRef = useRef(isVisible);
     const wasVisible = usePrevious(isVisible);
 
+    const modalId = useMemo(() => ComposerFocusManager.getId(), []);
+    const {businessType} = useContext(ModalBusinessTypeContext);
+    const saveFocusState = () => {
+        ComposerFocusManager.saveFocusState(modalId, businessType, shouldClearFocusWithType);
+        ComposerFocusManager.resetReadyToFocus(modalId);
+    };
+
     /**
      * Hides modal
      * @param callHideCallback - Should we call the onModalHide callback
@@ -67,11 +78,9 @@ function BaseModal(
                 onModalHide();
             }
             Modal.onModalDidClose();
-            if (!fullscreen) {
-                ComposerFocusManager.setReadyToFocus();
-            }
+            ComposerFocusManager.tryRestoreFocusAfterClosedCompletely(modalId, businessType, restoreFocusType);
         },
-        [shouldSetModalVisibility, onModalHide, fullscreen],
+        [shouldSetModalVisibility, onModalHide, businessType, restoreFocusType, modalId],
     );
 
     useEffect(() => {
@@ -119,7 +128,7 @@ function BaseModal(
     };
 
     const handleDismissModal = () => {
-        ComposerFocusManager.setReadyToFocus();
+        ComposerFocusManager.setReadyToFocus(modalId);
     };
 
     const {
@@ -181,7 +190,7 @@ function BaseModal(
             onModalShow={handleShowModal}
             propagateSwipe={propagateSwipe}
             onModalHide={hideModal}
-            onModalWillShow={() => ComposerFocusManager.resetReadyToFocus()}
+            onModalWillShow={saveFocusState}
             onDismiss={handleDismissModal}
             onSwipeComplete={() => onClose?.()}
             swipeDirection={swipeDirection}
@@ -205,12 +214,14 @@ function BaseModal(
             avoidKeyboard={avoidKeyboard}
             customBackdrop={shouldUseCustomBackdrop ? <Overlay onPress={handleBackdropPress} /> : undefined}
         >
-            <View
-                style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone]}
-                ref={ref}
-            >
-                <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
-            </View>
+            <ModalContent onDismiss={handleDismissModal}>
+                <View
+                    style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone]}
+                    ref={ref}
+                >
+                    <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
+                </View>
+            </ModalContent>
         </ReactNativeModal>
     );
 }

src/components/Modal/ModalBusinessTypeProvider/index.tsx

@@ -0,0 +1,20 @@
+import React, {useMemo} from 'react';
+import CONST from '@src/CONST';
+import type {ModalBusinessTypeContextProps, ModalBusinessTypeContextValue} from './types';
+
+const ModalBusinessTypeContext = React.createContext<ModalBusinessTypeContextValue>({
+    businessType: CONST.MODAL.BUSINESS_TYPE.DEFAULT,
+});
+
+function ModalBusinessTypeProvider({businessType, children}: ModalBusinessTypeContextProps) {
+    const contextValue = useMemo(
+        () => ({
+            businessType,
+        }),
+        [businessType],
+    );
+    return <ModalBusinessTypeContext.Provider value={contextValue}>{children}</ModalBusinessTypeContext.Provider>;
+}
+
+export default ModalBusinessTypeProvider;
+export {ModalBusinessTypeContext};

src/components/Modal/ModalBusinessTypeProvider/types.ts

@@ -0,0 +1,21 @@
+import type {ReactNode} from 'react';
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+
+type ModalBusinessTypeContextProps = {
+    /**
+     * So far, modern browsers only support the file cancel event in some newer versions
+     * (i.e., Chrome: 113+ / Firefox: 91+ / Safari 16.4+), and there is no standard feature detection method available.
+     * Therefore, we introduce this prop to isolate the impact of the file upload modal on the focus stack.
+     */
+    businessType: ValueOf<typeof CONST.MODAL.BUSINESS_TYPE>;
+
+    /** Children to render */
+    children: ReactNode;
+};
+
+type ModalBusinessTypeContextValue = {
+    businessType: ValueOf<typeof CONST.MODAL.BUSINESS_TYPE>;
+};
+
+export type {ModalBusinessTypeContextProps, ModalBusinessTypeContextValue};

src/components/Modal/ModalContent.tsx

@@ -0,0 +1,19 @@
+import type {ReactNode} from 'react';
+import React from 'react';
+
+type ModalContentProps = {
+    /** Modal contents */
+    children: ReactNode;
+
+    /** called after modal content is dismissed */
+    onDismiss: () => void;
+};
+
+function ModalContent({children, onDismiss = () => {}}: ModalContentProps) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useEffect(() => () => onDismiss?.(), []);
+    return children;
+}
+ModalContent.displayName = 'ModalContent';
+
+export default ModalContent;

src/components/Modal/index.android.tsx

@@ -1,17 +1,7 @@
 import React from 'react';
-import {AppState} from 'react-native';
-import ComposerFocusManager from '@libs/ComposerFocusManager';
 import BaseModal from './BaseModal';
 import type BaseModalProps from './types';
 
-AppState.addEventListener('focus', () => {
-    ComposerFocusManager.setReadyToFocus();
-});
-
-AppState.addEventListener('blur', () => {
-    ComposerFocusManager.resetReadyToFocus();
-});
-
 // Only want to use useNativeDriver on Android. It has strange flashes issue on IOS
 // https://github.com/react-native-modal/react-native-modal#the-modal-flashes-in-a-weird-way-when-animating
 function Modal({useNativeDriver = true, ...rest}: BaseModalProps) {

src/components/Modal/modalPropTypes.js

@@ -66,6 +66,9 @@ const propTypes = {
      * */
     hideModalContentWhileAnimating: PropTypes.bool,
 
+    /** how to re-focus after the modal is dismissed */
+    restoreFocusType: PropTypes.oneOf(_.values(CONST.MODAL.RESTORE_FOCUS_TYPE)),
+
     ...windowDimensionsPropTypes,
 };
 

src/components/Modal/types.ts

@@ -62,6 +62,12 @@ type BaseModalProps = Partial<ModalProps> & {
 
     /** Should we use a custom backdrop for the modal? (This prevents focus issues on desktop) */
     shouldUseCustomBackdrop?: boolean;
+
+    /** Whether the modal should clear the focus record for the current business type. */
+    shouldClearFocusWithType?: boolean;
+
+    /** How to re-focus after the modal is dismissed */
+    restoreFocusType?: ValueOf<typeof CONST.MODAL.RESTORE_FOCUS_TYPE>;
 };
 
 export default BaseModalProps;

src/components/PopoverMenu.tsx

@@ -3,6 +3,7 @@ import type {RefObject} from 'react';
 import React, {useRef} from 'react';
 import {View} from 'react-native';
 import type {ModalProps} from 'react-native-modal';
+import type {ValueOf} from 'type-fest';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -50,6 +51,15 @@ type PopoverMenuProps = Partial<PopoverModalProps> & {
     /** Callback method fired when the user requests to close the modal */
     onClose: () => void;
 
+    /** Callback method fired when the modal is shown */
+    onModalShow?: () => void;
+
+    /** Whether the modal should clear the focus record for the current business type. */
+    shouldClearFocusWithType?: boolean;
+
+    /** How to re-focus after the modal is dismissed */
+    restoreFocusType?: ValueOf<typeof CONST.MODAL.RESTORE_FOCUS_TYPE>;
+
     /** State that determines whether to display the modal or not */
     isVisible: boolean;
 
@@ -91,6 +101,9 @@ function PopoverMenu({
     anchorPosition,
     anchorRef,
     onClose,
+    shouldClearFocusWithType,
+    restoreFocusType,
+    onModalShow = () => {},
     headerText,
     fromSidebarMediumScreen,
     anchorAlignment = {
@@ -142,6 +155,9 @@ function PopoverMenu({
             anchorAlignment={anchorAlignment}
             onClose={onClose}
             isVisible={isVisible}
+            shouldClearFocusWithType={shouldClearFocusWithType}
+            restoreFocusType={restoreFocusType}
+            onModalShow={onModalShow}
             onModalHide={onModalHide}
             animationIn={animationIn}
             animationOut={animationOut}