close modal when opening new page using keyboard shortcut

src/components/KeyboardShortcutsModal.js

@@ -14,6 +14,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
 import KeyboardShortcut from '../libs/KeyboardShortcut';
 import * as KeyboardShortcutsActions from '../libs/actions/KeyboardShortcuts';
+import * as ModalActions from '../libs/actions/Modal';
 import ONYXKEYS from '../ONYXKEYS';
 
 const propTypes = {
@@ -35,6 +36,7 @@ class KeyboardShortcutsModal extends React.Component {
     componentDidMount() {
         const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.SHORTCUT_MODAL;
         this.unsubscribeShortcutModal = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
+            ModalActions.close();
             KeyboardShortcutsActions.showKeyboardShortcutModal();
         }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true);
     }

src/components/Modal/BaseModal.js

@@ -30,17 +30,28 @@ class BaseModal extends PureComponent {
         this.hideModal = this.hideModal.bind(this);
     }
 
+    componentDidMount() {
+        if (!this.props.isVisible) { return; }
+
+        // To handle closing any modal already visible when this modal is mounted, i.e. PopoverReportActionContextMenu
+        Modal.setCloseModal(this.props.onClose);
+    }
+
     componentDidUpdate(prevProps) {
         if (prevProps.isVisible === this.props.isVisible) {
             return;
         }
 
         Modal.willAlertModalBecomeVisible(this.props.isVisible);
+        Modal.setCloseModal(this.props.isVisible ? this.props.onClose : null);
     }
 
     componentWillUnmount() {
         // we don't want to call the onModalHide on unmount
         this.hideModal(this.props.isVisible);
+
+        // To prevent closing any modal already unmounted when this modal still remains as visible state
+        Modal.setCloseModal(null);
     }
 
     /**

src/components/Popover/index.js

@@ -1,42 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {createPortal} from 'react-dom';
-import {withOnyx} from 'react-native-onyx';
-import {propTypes as popoverPropTypes, defaultProps as popoverDefaultProps} from './popoverPropTypes';
+import {propTypes, defaultProps} from './popoverPropTypes';
 import CONST from '../../CONST';
 import Modal from '../Modal';
 import withWindowDimensions from '../withWindowDimensions';
-import compose from '../../libs/compose';
-import ONYXKEYS from '../../ONYXKEYS';
-
-const propTypes = {
-    isShortcutsModalOpen: PropTypes.bool,
-    ...popoverPropTypes,
-};
-
-const defaultProps = {
-    isShortcutsModalOpen: false,
-    ...popoverDefaultProps,
-};
 
 /*
  * This is a convenience wrapper around the Modal component for a responsive Popover.
  * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
  */
 const Popover = (props) => {
-    if (props.isShortcutsModalOpen && props.isVisible) {
-        // There are modals that can show up on top of these pop-overs, for example, the keyboard shortcut menu,
-        // if that happens, close the pop-over as if we were clicking outside.
-        props.onClose();
-        return null;
-    }
-
     if (!props.fullscreen && !props.isSmallScreenWidth) {
         return createPortal(
             <Modal
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
-                isVisible={props.isVisible && !props.isShortcutsModalOpen}
                 type={CONST.MODAL.MODAL_TYPE.POPOVER}
                 popoverAnchorPosition={props.anchorPosition}
                 animationInTiming={props.disableAnimation ? 1 : props.animationInTiming}
@@ -50,7 +28,6 @@ const Popover = (props) => {
         <Modal
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            isVisible={props.isVisible && !props.isShortcutsModalOpen}
             type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
             popoverAnchorPosition={props.isSmallScreenWidth ? undefined : props.anchorPosition}
             fullscreen={props.isSmallScreenWidth ? true : props.fullscreen}
@@ -64,9 +41,4 @@ Popover.propTypes = propTypes;
 Popover.defaultProps = defaultProps;
 Popover.displayName = 'Popover';
 
-export default compose(
-    withWindowDimensions,
-    withOnyx({
-        isShortcutsModalOpen: {key: ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN},
-    }),
-)(Popover);
+export default withWindowDimensions(Popover);

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -115,9 +115,11 @@ class AuthScreens extends React.Component {
         // the chat switcher, or new group chat
         // based on the key modifiers pressed and the operating system
         this.unsubscribeSearchShortcut = KeyboardShortcut.subscribe(searchShortcutConfig.shortcutKey, () => {
+            Modal.close();
             Navigation.navigate(ROUTES.SEARCH);
         }, searchShortcutConfig.descriptionKey, searchShortcutConfig.modifiers, true);
         this.unsubscribeGroupShortcut = KeyboardShortcut.subscribe(groupShortcutConfig.shortcutKey, () => {
+            Modal.close();
             Navigation.navigate(ROUTES.NEW_GROUP);
         }, groupShortcutConfig.descriptionKey, groupShortcutConfig.modifiers, true);
     }

src/libs/actions/Modal.js

@@ -1,6 +1,22 @@
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 
+let closeModal;
+
+/**
+ * Allows other parts of the app to call modal close function
+ *
+ * @param {Function} [onClose]
+ */
+function setCloseModal(onClose) {
+    closeModal = onClose;
+}
+
+function close() {
+    if (!closeModal) { return; }
+    closeModal();
+}
+
 /**
  * Allows other parts of the app to know when a modal has been opened or closed
  *
@@ -21,6 +37,8 @@ function willAlertModalBecomeVisible(isVisible) {
 }
 
 export {
+    setCloseModal,
+    close,
     setModalVisibility,
     willAlertModalBecomeVisible,
 };