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}