Merge pull request #11552 from Expensify/youssef_fix_message_reappearing

Only debounce saving draft when user is typing
Expensify · Oct 4, 2022 · 1a42cf8 · 1a42cf8
2 parents 5d05cc7 + 84e9841
commit 1a42cf8
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
@@ -376,8 +376,9 @@ class ReportActionCompose extends React.Component {
      * Update the value of the comment in Onyx
      *
      * @param {String} newComment
+     * @param {Boolean} shouldDebounceSaveComment
      */
-    updateComment(newComment) {
+    updateComment(newComment, shouldDebounceSaveComment) {
         this.setState({
             isCommentEmpty: !!newComment.match(/^(\s|`)*$/),
             value: newComment,
@@ -394,7 +395,11 @@ class ReportActionCompose extends React.Component {
         }
 
         this.comment = newComment;
-        this.debouncedSaveReportComment(newComment);
+        if (shouldDebounceSaveComment) {
+            this.debouncedSaveReportComment(newComment);
+        } else {
+            Report.saveReportComment(this.props.reportID, newComment || '');
+        }
         if (newComment) {
             this.debouncedBroadcastUserIsTyping();
         }
@@ -472,6 +477,11 @@ class ReportActionCompose extends React.Component {
             e.preventDefault();
         }
 
+        // Since we're submitting the form here which should clear the composer
+        // We don't really care about saving the draft the user was typing
+        // We need to make sure an empty draft gets saved instead
+        this.debouncedSaveReportComment.cancel();
+
         const comment = this.prepareCommentAndResetComposer();
         if (!comment) {
             return;
@@ -604,7 +614,7 @@ class ReportActionCompose extends React.Component {
                                         textAlignVertical="top"
                                         placeholder={inputPlaceholder}
                                         placeholderTextColor={themeColors.placeholderText}
-                                        onChangeText={this.updateComment}
+                                        onChangeText={comment => this.updateComment(comment, true)}
                                         onKeyPress={this.triggerHotkeyActions}
                                         onDragEnter={(e, isOriginComposer) => {
                                             if (!isOriginComposer) {