Show delete confirmation for the action when saving empty comment

src/components/ConfirmModal.js

@@ -43,6 +43,12 @@ const propTypes = {
     /** Whether we should show the cancel button */
     shouldShowCancelButton: PropTypes.bool,
 
+    /** Callback method fired when the modal is hidden */
+    onModalHide: PropTypes.func,
+
+    /** Should we announce the Modal visibility changes? */
+    shouldSetModalVisibility: PropTypes.bool,
+
     ...withLocalizePropTypes,
 
     ...windowDimensionsPropTypes,
@@ -56,13 +62,17 @@ const defaultProps = {
     danger: false,
     onCancel: () => {},
     shouldShowCancelButton: true,
+    shouldSetModalVisibility: true,
+    onModalHide: () => {},
 };
 
 const ConfirmModal = props => (
     <Modal
         onSubmit={props.onConfirm}
         onClose={props.onCancel}
         isVisible={props.isVisible}
+        shouldSetModalVisibility={props.shouldSetModalVisibility}
+        onModalHide={props.onModalHide}
         type={props.isSmallScreenWidth
             ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED
             : CONST.MODAL.MODAL_TYPE.CONFIRM}

src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js

@@ -24,6 +24,7 @@ class PopoverReportActionContextMenu extends React.Component {
             reportActionDraftMessage: '',
             isPopoverVisible: false,
             isDeleteCommentConfirmModalVisible: false,
+            shouldSetModalVisibilityForDeleteConfirmation: true,
             cursorRelativePosition: {
                 horizontal: 0,
                 vertical: 0,
@@ -187,12 +188,8 @@ class PopoverReportActionContextMenu extends React.Component {
      * After Popover hides, call the registered onPopoverHide & onPopoverHideActionCallback callback and reset it
      */
     runAndResetOnPopoverHide() {
-        this.onPopoverHide();
-        this.onPopoverHideActionCallback();
-
-        // After we have called the action, reset it.
-        this.onPopoverHide = () => {};
-        this.onPopoverHideActionCallback = () => {};
+        this.onPopoverHide = this.runAndResetCallback(this.onPopoverHide);
+        this.onPopoverHideActionCallback = this.runAndResetCallback(this.onPopoverHideActionCallback);
     }
 
     /**
@@ -229,26 +226,49 @@ class PopoverReportActionContextMenu extends React.Component {
         );
     }
 
+    /**
+     * Run the callback and return a noop function to reset it
+     * @param {Function} callback
+     * @returns {Function}
+     */
+    runAndResetCallback(callback) {
+        callback();
+        return () => {};
+    }
+
     confirmDeleteAndHideModal() {
+        this.callbackWhenDeleteModalHide = () => this.onComfirmDeleteModal = this.runAndResetCallback(this.onComfirmDeleteModal);
         Report.deleteReportComment(this.state.reportID, this.state.reportAction);
         this.setState({isDeleteCommentConfirmModalVisible: false});
     }
 
     hideDeleteModal() {
+        this.callbackWhenDeleteModalHide = () => this.onCancelDeleteModal = this.runAndResetCallback(this.onCancelDeleteModal);
         this.setState({
             reportID: 0,
             reportAction: {},
             isDeleteCommentConfirmModalVisible: false,
+            shouldSetModalVisibilityForDeleteConfirmation: true,
         });
     }
 
     /**
      * Opens the Confirm delete action modal
      * @param {Number} reportID
      * @param {Object} reportAction
+     * @param {Boolean} [shouldSetModalVisibility]
+     * @param {Function} [onConfirm]
+     * @param {Function} [onCancel]
      */
-    showDeleteModal(reportID, reportAction) {
-        this.setState({reportID, reportAction, isDeleteCommentConfirmModalVisible: true});
+    showDeleteModal(reportID, reportAction, shouldSetModalVisibility = true, onConfirm = () => {}, onCancel = () => {}) {
+        this.onCancelDeleteModal = onCancel;
+        this.onComfirmDeleteModal = onConfirm;
+        this.setState({
+            reportID,
+            reportAction,
+            shouldSetModalVisibilityForDeleteConfirmation: shouldSetModalVisibility,
+            isDeleteCommentConfirmModalVisible: true,
+        });
     }
 
     render() {
@@ -278,8 +298,10 @@ class PopoverReportActionContextMenu extends React.Component {
                 <ConfirmModal
                     title={this.props.translate('reportActionContextMenu.deleteComment')}
                     isVisible={this.state.isDeleteCommentConfirmModalVisible}
+                    shouldSetModalVisibility={this.state.shouldSetModalVisibilityForDeleteConfirmation}
                     onConfirm={this.confirmDeleteAndHideModal}
                     onCancel={this.hideDeleteModal}
+                    onModalHide={this.callbackWhenDeleteModalHide}
                     prompt={this.props.translate('reportActionContextMenu.deleteConfirmation')}
                     confirmText={this.props.translate('common.delete')}
                     cancelText={this.props.translate('common.cancel')}

src/pages/home/report/ContextMenu/ReportActionContextMenu.js

@@ -82,12 +82,15 @@ function hideDeleteModal() {
  * Opens the Confirm delete action modal
  * @param {Number} reportID
  * @param {Object} reportAction
+ * @param {Boolean} [shouldSetModalVisibility]
+ * @param {Function} [onConfirm]
+ * @param {Function} [onCancel]
  */
-function showDeleteModal(reportID, reportAction) {
+function showDeleteModal(reportID, reportAction, shouldSetModalVisibility, onConfirm, onCancel) {
     if (!contextMenuRef.current) {
         return;
     }
-    contextMenuRef.current.showDeleteModal(reportID, reportAction);
+    contextMenuRef.current.showDeleteModal(reportID, reportAction, shouldSetModalVisibility, onConfirm, onCancel);
 }
 
 /**

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
@@ -14,6 +14,7 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import Button from '../../../components/Button';
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
 import compose from '../../../libs/compose';
+import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
 import VirtualKeyboard from '../../../libs/VirtualKeyboard';
 
 const propTypes = {
@@ -122,6 +123,18 @@ class ReportActionItemMessageEdit extends React.Component {
         this.debouncedSaveDraft.cancel();
 
         const trimmedNewDraft = this.state.draft.trim();
+
+        // When user tries to save the empty message, it will delete it. Prompt the user to confirm deleting.
+        if (!trimmedNewDraft) {
+            ReportActionContextMenu.showDeleteModal(
+                this.props.reportID,
+                this.props.action,
+                false,
+                this.deleteDraft,
+                () => InteractionManager.runAfterInteractions(() => this.textInput.focus()),
+            );
+            return;
+        }
         Report.editReportComment(this.props.reportID, this.props.action, trimmedNewDraft);
         this.deleteDraft();
     }