Close all popovers when Keyboard shortcut modal is displayed

src/Expensify.js

@@ -27,6 +27,7 @@ import Navigation from './libs/Navigation/Navigation';
 import DeeplinkWrapper from './components/DeeplinkWrapper';
 import PopoverReportActionContextMenu from './pages/home/report/ContextMenu/PopoverReportActionContextMenu';
 import * as ReportActionContextMenu from './pages/home/report/ContextMenu/ReportActionContextMenu';
+import KeyboardShortcutsModal from './components/KeyboardShortcutsModal';
 
 // This lib needs to be imported, but it has nothing to export since all it contains is an Onyx connection
 // eslint-disable-next-line no-unused-vars
@@ -197,6 +198,7 @@ class Expensify extends PureComponent {
             <DeeplinkWrapper>
                 {!this.state.isSplashShown && (
                     <>
+                        <KeyboardShortcutsModal />
                         <GrowlNotification ref={Growl.growlRef} />
                         <PopoverReportActionContextMenu
                             ref={ReportActionContextMenu.contextMenuRef}

src/components/Popover/index.js

@@ -1,22 +1,44 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {createPortal} from 'react-dom';
-import {propTypes, defaultProps} from './popoverPropTypes';
+import {withOnyx} from 'react-native-onyx';
+import {propTypes as popoverPropTypes, defaultProps as popoverDefaultProps} 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
-                type={CONST.MODAL.MODAL_TYPE.POPOVER}
-                popoverAnchorPosition={props.anchorPosition}
                 // 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}
                 animationOutTiming={props.disableAnimation ? 1 : props.animationOutTiming}
                 shouldCloseOnOutsideClick
@@ -26,10 +48,11 @@ const Popover = (props) => {
     }
     return (
         <Modal
-            type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
-            popoverAnchorPosition={props.isSmallScreenWidth ? undefined : props.anchorPosition}
             // 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}
             animationInTiming={props.disableAnimation && !props.isSmallScreenWidth ? 1 : props.animationInTiming}
             animationOutTiming={props.disableAnimation && !props.isSmallScreenWidth ? 1 : props.animationOutTiming}
@@ -41,4 +64,9 @@ Popover.propTypes = propTypes;
 Popover.defaultProps = defaultProps;
 Popover.displayName = 'Popover';
 
-export default withWindowDimensions(Popover);
+export default compose(
+    withWindowDimensions,
+    withOnyx({
+        isShortcutsModalOpen: {key: ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN},
+    }),
+)(Popover);

src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js

@@ -9,7 +9,6 @@ import Timing from '../../../../libs/actions/Timing';
 import CONST from '../../../../CONST';
 import Performance from '../../../../libs/Performance';
 import withDrawerState from '../../../../components/withDrawerState';
-import KeyboardShortcutsModal from '../../../../components/KeyboardShortcutsModal';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
 import compose from '../../../../libs/compose';
 import sidebarPropTypes from './sidebarPropTypes';
@@ -66,7 +65,6 @@ class BaseSidebarScreen extends Component {
                                 onLayout={this.props.onLayout}
                             />
                         </View>
-                        <KeyboardShortcutsModal />
                         {this.props.children}
                     </>
                 )}