Context Menu rendering

src/components/Modal/BaseModal.js

@@ -93,6 +93,8 @@ class BaseModal extends PureComponent {
                 backdropColor={themeColors.modalBackdrop}
                 backdropOpacity={hideBackdrop ? 0 : 0.5}
                 backdropTransitionOutTiming={0}
+                hasBackdrop={this.props.fullscreen}
+                coverScreen={this.props.fullscreen}
                 style={modalStyle}
                 deviceHeight={this.props.windowHeight}
                 deviceWidth={this.props.windowWidth}
@@ -127,6 +129,7 @@ class BaseModal extends PureComponent {
                                     ...modalContainerStyle,
                                     ...modalPaddingStyles,
                                 }}
+                                ref={this.props.forwardRef}
                             >
                                 {this.props.children}
                             </View>
@@ -141,4 +144,7 @@ class BaseModal extends PureComponent {
 BaseModal.propTypes = propTypes;
 BaseModal.defaultProps = defaultProps;
 BaseModal.displayName = 'BaseModal';
-export default BaseModal;
+export default React.forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <BaseModal {...props} forwardRef={ref} />
+));

src/components/Modal/ModalPropTypes.js

@@ -4,6 +4,12 @@ import CONST from '../../CONST';
 import {windowDimensionsPropTypes} from '../withWindowDimensions';
 
 const propTypes = {
+    /** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
+    fullscreen: PropTypes.bool,
+
+    /** Should we close modal on outside click */
+    shouldCloseOnOutsideClick: PropTypes.bool,
+
     /** Should we announce the Modal visibility changes? */
     shouldSetModalVisibility: PropTypes.bool,
 
@@ -52,6 +58,8 @@ const propTypes = {
 };
 
 const defaultProps = {
+    fullscreen: true,
+    shouldCloseOnOutsideClick: false,
     shouldSetModalVisibility: true,
     onSubmit: null,
     type: '',

src/components/Modal/index.js

@@ -1,14 +1,47 @@
-import React from 'react';
+import React, {Component} from 'react';
 import withWindowDimensions from '../withWindowDimensions';
 import BaseModal from './BaseModal';
 import {propTypes, defaultProps} from './ModalPropTypes';
 
-const Modal = props => (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <BaseModal {...props}>
-        {props.children}
-    </BaseModal>
-);
+class Modal extends Component {
+    constructor(props) {
+        super(props);
+        this.closeOnOutsideClick = this.closeOnOutsideClick.bind(this);
+    }
+
+    componentDidMount() {
+        if (this.props.shouldCloseOnOutsideClick) {
+            document.addEventListener('mousedown', this.closeOnOutsideClick);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.shouldCloseOnOutsideClick) {
+            document.removeEventListener('mousedown', this.closeOnOutsideClick);
+        }
+    }
+
+    closeOnOutsideClick(event) {
+        if (this.props.isVisible
+            && this.baseModalRef
+            && !this.baseModalRef.contains(event.target)
+            && this.props.shouldCloseOnOutsideClick) {
+            this.props.onClose();
+        }
+    }
+
+    render() {
+        return (
+            <BaseModal
+                ref={el => this.baseModalRef = el}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+            >
+                {this.props.children}
+            </BaseModal>
+        );
+    }
+}
 
 Modal.propTypes = propTypes;
 Modal.defaultProps = defaultProps;

src/components/Popover/PopoverPropTypes.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {propTypes as modalPropTypes, defaultProps as defaultModalProps} from '../Modal/ModalPropTypes';
 
 const propTypes = {
-    ...(_.omit(modalPropTypes, 'type', 'popoverAnchorPosition')),
+    ...(_.omit(modalPropTypes, ['type', 'popoverAnchorPosition'])),
 
     /** The anchor position of the popover */
     anchorPosition: PropTypes.shape({
@@ -15,7 +15,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    ...(_.omit(defaultModalProps, 'type', 'popoverAnchorPosition')),
+    ...(_.omit(defaultModalProps, ['type', 'popoverAnchorPosition'])),
 
     // Anchor position is optional only because it is not relevant on mobile
     anchorPosition: {},

src/components/Popover/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import {createPortal} from 'react-dom';
 import {propTypes, defaultProps} from './PopoverPropTypes';
 import CONST from '../../CONST';
 import Modal from '../Modal';
@@ -8,16 +9,32 @@ import withWindowDimensions from '../withWindowDimensions';
  * 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 => (
-    <Modal
-        type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
-        popoverAnchorPosition={props.anchorPosition}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
-        animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
-    />
-);
+const Popover = (props) => {
+    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}
+                animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
+                animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
+                shouldCloseOnOutsideClick
+            />,
+            document.body,
+        );
+    }
+    return (
+        <Modal
+            type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
+            popoverAnchorPosition={props.anchorPosition}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
+            animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
+        />
+    );
+};
 
 Popover.propTypes = propTypes;
 Popover.defaultProps = defaultProps;

src/pages/home/report/ReportActionItem.js

@@ -279,6 +279,7 @@ class ReportActionItem extends Component {
                     animationOutTiming={1}
                     measureContent={this.measureContent}
                     shouldSetModalVisibility={false}
+                    fullscreen={false}
                 >
                     <ReportActionContextMenu
                         isVisible