try to refactor the modal's refocus logic

src/CONST.ts

@@ -670,6 +670,11 @@ const CONST = {
             RIGHT: 'right',
         },
         POPOVER_MENU_PADDING: 8,
+        RESTORE_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_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_TYPE.PRESERVE);
+                                selectItem(item);
+                            }}
                             focused={focusedIndex === menuIndex}
                         />
                     ))}

src/components/Composer/index.js

@@ -452,16 +452,10 @@ function Composer({
                 disabled={isDisabled}
                 onKeyPress={handleKeyPress}
                 onFocus={(e) => {
-                    ReportActionComposeFocusManager.onComposerFocus(() => {
-                        if (!textInput.current) {
-                            return;
-                        }
-
-                        textInput.current.focus();
-                    });
-                    if (props.onFocus) {
-                        props.onFocus(e);
+                    if (!props.onFocus) {
+                        return;
                     }
+                    props.onFocus(e);
                 }}
             />
             {shouldCalculateCaretPosition && renderElementForCaretPosition}

src/components/Modal/BaseModal.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
@@ -13,7 +13,8 @@ import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Modal from '@userActions/Modal';
 import CONST from '@src/CONST';
-import BaseModalProps from './types';
+import ModalContent from './ModalContent';
+import BaseModalProps, {ModalRef} from './types';
 
 function BaseModal(
     {
@@ -36,10 +37,11 @@ function BaseModal(
         animationOutTiming,
         statusBarTranslucent = true,
         onLayout,
+        restoreFocusType,
         avoidKeyboard = false,
         children,
     }: BaseModalProps,
-    ref: React.ForwardedRef<View>,
+    ref: React.ForwardedRef<ModalRef>,
 ) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -50,6 +52,13 @@ function BaseModal(
     const isVisibleRef = useRef(isVisible);
     const wasVisible = usePrevious(isVisible);
 
+    const modalId = useMemo(() => ComposerFocusManager.getId(), []);
+
+    const saveFocusState = () => {
+        ComposerFocusManager.saveFocusState(modalId);
+        ComposerFocusManager.resetReadyToFocus(modalId);
+    };
+
     /**
      * Hides modal
      * @param callHideCallback - Should we call the onModalHide callback
@@ -64,11 +73,9 @@ function BaseModal(
                 onModalHide();
             }
             Modal.onModalDidClose();
-            if (!fullscreen) {
-                ComposerFocusManager.setReadyToFocus();
-            }
+            ComposerFocusManager.tryRestoreFocusAfterClosedCompletely(modalId, restoreFocusType);
         },
-        [shouldSetModalVisibility, onModalHide, fullscreen],
+        [shouldSetModalVisibility, onModalHide, restoreFocusType, modalId],
     );
 
     useEffect(() => {
@@ -116,9 +123,18 @@ function BaseModal(
     };
 
     const handleDismissModal = () => {
-        ComposerFocusManager.setReadyToFocus();
+        ComposerFocusManager.setReadyToFocus(modalId);
     };
 
+    useImperativeHandle(
+        ref,
+        () => ({
+            removePromise: () => ComposerFocusManager.removePromise(modalId),
+            setReadyToFocus: () => ComposerFocusManager.setReadyToFocus(modalId),
+        }),
+        [modalId],
+    );
+
     const {
         modalStyle,
         modalContainerStyle,
@@ -178,7 +194,7 @@ function BaseModal(
             onModalShow={handleShowModal}
             propagateSwipe={propagateSwipe}
             onModalHide={hideModal}
-            onModalWillShow={() => ComposerFocusManager.resetReadyToFocus()}
+            onModalWillShow={saveFocusState}
             onDismiss={handleDismissModal}
             onSwipeComplete={onClose}
             swipeDirection={swipeDirection}
@@ -201,12 +217,9 @@ function BaseModal(
             onLayout={onLayout}
             avoidKeyboard={avoidKeyboard}
         >
-            <View
-                style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone]}
-                ref={ref}
-            >
-                {children}
-            </View>
+            <ModalContent onDismiss={handleDismissModal}>
+                <View style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone]}>{children}</View>
+            </ModalContent>
         </ReactNativeModal>
     );
 }

src/components/Modal/ModalContent.js

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** Modal contents */
+    children: PropTypes.node.isRequired,
+
+    /** called after modal content is dismissed */
+    onDismiss: PropTypes.func,
+};
+
+function ModalContent({children}) {
+    return children;
+}
+
+ModalContent.propTypes = propTypes;
+ModalContent.displayName = 'ModalContent';
+
+export default ModalContent;

src/components/Modal/ModalContent.web.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const propTypes = {
+    /** Modal contents */
+    children: PropTypes.node.isRequired,
+
+    /** called after modal content is dismissed */
+    onDismiss: PropTypes.func,
+};
+
+function ModalContent({children, onDismiss = () => {}}) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useEffect(() => () => onDismiss(), []);
+    return children;
+}
+
+ModalContent.propTypes = propTypes;
+ModalContent.displayName = 'ModalContent';
+
+export default ModalContent;

src/components/Modal/index.android.tsx

@@ -1,26 +1,36 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import {AppState} from 'react-native';
 import withWindowDimensions from '@components/withWindowDimensions';
-import ComposerFocusManager from '@libs/ComposerFocusManager';
+import CONST from '@src/CONST';
 import BaseModal from './BaseModal';
-import BaseModalProps from './types';
-
-AppState.addEventListener('focus', () => {
-    ComposerFocusManager.setReadyToFocus();
-});
-
-AppState.addEventListener('blur', () => {
-    ComposerFocusManager.resetReadyToFocus();
-});
+import BaseModalProps, {ModalRef} from './types';
 
 // 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) {
+function Modal({useNativeDriver = true, restoreFocusType, onModalHide, ...rest}: BaseModalProps) {
+    const modalRef = useRef<ModalRef>(null);
+    const hideModal = () => {
+        onModalHide();
+        if (restoreFocusType && restoreFocusType !== CONST.MODAL.RESTORE_TYPE.DEFAULT) {
+            modalRef?.current?.removePromise();
+            return;
+        }
+        const listener = AppState.addEventListener('focus', () => {
+            // TODO:del
+            console.debug('android is ready to focus');
+            listener.remove();
+            modalRef?.current?.setReadyToFocus();
+        });
+    };
+
     return (
         <BaseModal
             useNativeDriver={useNativeDriver}
+            onModalHide={hideModal}
+            restoreFocusType={restoreFocusType}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}
+            ref={modalRef}
         >
             {rest.children}
         </BaseModal>

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_TYPE)),
+
     ...windowDimensionsPropTypes,
 };
 

src/components/Modal/types.ts

@@ -61,6 +61,15 @@ type BaseModalProps = WindowDimensionsProps &
          * See: https://github.com/react-native-modal/react-native-modal/pull/116
          * */
         hideModalContentWhileAnimating?: boolean;
+
+        /** how to re-focus after the modal is dismissed */
+        restoreFocusType?: ValueOf<typeof CONST.MODAL.RESTORE_TYPE>;
     };
 
+type ModalRef = {
+    removePromise: () => void;
+    setReadyToFocus: () => void;
+};
+
+export type {ModalRef};
 export default BaseModalProps;

src/components/PopoverMenu/index.js

@@ -76,11 +76,13 @@ function PopoverMenu(props) {
 
     return (
         <PopoverWithMeasuredContent
+            restoreFocusType={props.restoreFocusType}
             anchorPosition={props.anchorPosition}
             anchorRef={props.anchorRef}
             anchorAlignment={props.anchorAlignment}
             onClose={props.onClose}
             isVisible={props.isVisible}
+            onModalShow={props.onModalShow}
             onModalHide={() => {
                 setFocusedIndex(-1);
                 if (selectedItemIndex.current !== null) {

src/components/PopoverWithoutOverlay/index.js

@@ -1,16 +1,21 @@
-import React from 'react';
+import React, {useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import {isFunction, isObject} from 'underscore';
+import ModalContent from '@components/Modal/ModalContent';
 import {defaultProps, propTypes} from '@components/Popover/popoverPropTypes';
 import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
+import ComposerFocusManager from '@libs/ComposerFocusManager';
 import getModalStyles from '@styles/getModalStyles';
 import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Modal from '@userActions/Modal';
 
 function Popover(props) {
     const styles = useThemeStyles();
+    const modalId = useMemo(() => ComposerFocusManager.getId(), []);
+    const containerRef = useRef();
     const {onOpen, close} = React.useContext(PopoverContext);
     const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} = getModalStyles(
         'popover',
@@ -34,6 +39,8 @@ function Popover(props) {
                 anchorRef: props.anchorRef,
             });
             removeOnClose = Modal.setCloseModal(() => props.onClose(props.anchorRef));
+            ComposerFocusManager.saveFocusState(modalId, containerRef.current);
+            ComposerFocusManager.resetReadyToFocus(modalId);
         } else {
             props.onModalHide();
             close(props.anchorRef);
@@ -51,14 +58,31 @@ function Popover(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.isVisible]);
 
+    const restoreFocusTypeRef = useRef();
+    restoreFocusTypeRef.current = props.restoreFocusType;
+    const handleDismissContent = () => {
+        ComposerFocusManager.tryRestoreFocusAfterClosedCompletely(modalId, restoreFocusTypeRef.current);
+        // PopoverWithMeasuredContent delays the mounting of this popover, so here we also need to defer the restoration.
+        // In a follow-up PR, we can also consider how to improve the former.
+        setImmediate(() => ComposerFocusManager.setReadyToFocus(modalId));
+    };
+
     if (!props.isVisible) {
         return null;
     }
 
     return (
         <View
             style={[modalStyle, {zIndex: 1}]}
-            ref={props.withoutOverlayRef}
+            ref={(el) => {
+                containerRef.current = el;
+                if (isFunction(props.withoutOverlayRef)) {
+                    props.withoutOverlayRef(el);
+                } else if (isObject(props.withoutOverlayRef)) {
+                    // eslint-disable-next-line no-param-reassign
+                    props.withoutOverlayRef.current = el;
+                }
+            }}
         >
             <SafeAreaInsetsContext.Consumer>
                 {(insets) => {
@@ -85,16 +109,18 @@ function Popover(props) {
                         insets,
                     });
                     return (
-                        <View
-                            style={{
-                                ...styles.defaultModalContainer,
-                                ...modalContainerStyle,
-                                ...modalPaddingStyles,
-                            }}
-                            ref={props.forwardedRef}
-                        >
-                            {props.children}
-                        </View>
+                        <ModalContent onDismiss={handleDismissContent}>
+                            <View
+                                style={{
+                                    ...styles.defaultModalContainer,
+                                    ...modalContainerStyle,
+                                    ...modalPaddingStyles,
+                                }}
+                                ref={props.forwardedRef}
+                            >
+                                {props.children}
+                            </View>
+                        </ModalContent>
                     );
                 }}
             </SafeAreaInsetsContext.Consumer>