diff --git a/src/components/KeyboardShortcutsModal.js b/src/components/KeyboardShortcutsModal.js index fc4f2e5cf17e..81ad2f642831 100644 --- a/src/components/KeyboardShortcutsModal.js +++ b/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); } diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js index dc29bc489618..a4b7ed90a8fe 100644 --- a/src/components/Modal/BaseModal.js +++ b/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); } /** diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js index 54ca87239593..031d9703d2c4 100644 --- a/src/components/Popover/index.js +++ b/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.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); } diff --git a/src/libs/actions/Modal.js b/src/libs/actions/Modal.js index 37e54093d1b1..ebf4fd2999c3 100644 --- a/src/libs/actions/Modal.js +++ b/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, };