Focus the compose field after closing modals

src/ONYXKEYS.js

@@ -26,6 +26,9 @@ export default {
     // Contains loading data for the IOU feature (IOUModal, IOUDetail, & IOUPreview Components)
     IOU: 'iou',
 
+    // Keeps track if there is modal currently visible or not
+    MODAL: 'modal',
+
     // Contains the personalDetails of the user as well as their timezone
     MY_PERSONAL_DETAILS: 'myPersonalDetails',
 

src/components/Modal/BaseModal.js

@@ -2,11 +2,13 @@ import React, {PureComponent} from 'react';
 import {View} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+
 import KeyboardShortcut from '../../libs/KeyboardShortcut';
 import styles, {getSafeAreaPadding} from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import {propTypes, defaultProps} from './ModalPropTypes';
 import getModalStyles from '../../styles/getModalStyles';
+import {setModalVisibility} from '../../libs/actions/Modal';
 
 class BaseModal extends PureComponent {
     constructor(props) {
@@ -20,11 +22,17 @@ class BaseModal extends PureComponent {
         this.unsubscribeFromKeyEvents();
     }
 
+    /**
+     * Listens to specific keyboard keys when the modal has been opened
+     */
     subscribeToKeyEvents() {
         KeyboardShortcut.subscribe('Escape', this.props.onClose, [], true);
         KeyboardShortcut.subscribe('Enter', this.props.onSubmit, [], true);
     }
 
+    /**
+     * Stops listening to keyboard keys when modal has been closed
+     */
     unsubscribeFromKeyEvents() {
         KeyboardShortcut.unsubscribe('Escape');
         KeyboardShortcut.unsubscribe('Enter');
@@ -53,9 +61,13 @@ class BaseModal extends PureComponent {
             <ReactNativeModal
                 onBackdropPress={this.props.onClose}
                 onBackButtonPress={this.props.onClose}
-                onModalShow={this.subscribeToKeyEvents}
+                onModalShow={() => {
+                    this.subscribeToKeyEvents();
+                    setModalVisibility(true);
+                }}
                 onModalHide={() => {
                     this.unsubscribeFromKeyEvents();
+                    setModalVisibility(false);
                     this.props.onModalHide();
                 }}
                 onSwipeComplete={this.props.onClose}

src/libs/actions/Modal.js

@@ -0,0 +1,16 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+
+/**
+ * Allows other parts of the app to know when a modal has been opened or closed
+ *
+ * @param {bool} isVisible
+ */
+function setModalVisibility(isVisible) {
+    Onyx.merge(ONYXKEYS.MODAL, {isVisible});
+}
+
+export {
+    // eslint-disable-next-line import/prefer-default-export
+    setModalVisibility,
+};

src/pages/home/report/ReportActionCompose.js

@@ -27,13 +27,21 @@ const propTypes = {
     // The ID of the report actions will be created for
     reportID: PropTypes.number.isRequired,
 
+    // Indicates when the sidebar is shown
     isSidebarShown: PropTypes.bool.isRequired,
 
+    // Details about any modals being used
+    modal: PropTypes.shape({
+        // Indicates if there is a modal currently visible or not
+        isVisible: PropTypes.bool,
+    }),
+
     ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
     comment: '',
+    modal: {},
 };
 
 class ReportActionCompose extends React.Component {
@@ -62,6 +70,11 @@ class ReportActionCompose extends React.Component {
         if (this.props.comment && prevProps.comment === '' && prevProps.comment !== this.props.comment) {
             this.comment = this.props.comment;
         }
+
+        // When any modal goes from visible to hidden, bring focus to the compose field
+        if (prevProps.modal.isVisible && !this.props.modal.isVisible) {
+            this.setIsFocused(true);
+        }
     }
 
     /**
@@ -166,9 +179,6 @@ class ReportActionCompose extends React.Component {
                             addAction(this.props.reportID, '', file);
                             this.setTextInputShouldClear(false);
                         }}
-                        onModalHide={() => {
-                            this.setIsFocused(true);
-                        }}
                     >
                         {({displayFileInModal}) => (
                             <>
@@ -257,6 +267,9 @@ export default compose(
         isSidebarShown: {
             key: ONYXKEYS.IS_SIDEBAR_SHOWN,
         },
+        modal: {
+            key: ONYXKEYS.MODAL,
+        },
     }),
     withWindowDimensions,
 )(ReportActionCompose);