From 15ea4cc832f7ceb9d1ee9bb9b3dc1b557823eddf Mon Sep 17 00:00:00 2001
From: puneet <puneet.here121@gmail.com>
Date: Wed, 19 Oct 2022 19:34:30 -0700
Subject: [PATCH 1/4] add character limit error

---
 src/pages/home/report/ReportActionItemMessageEdit.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 49a442e9b031..bb2cb4e826b9 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -19,6 +19,7 @@ import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton
 import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
 import VirtualKeyboard from '../../../libs/VirtualKeyboard';
 import reportPropTypes from '../../reportPropTypes';
+import ExceededCommentLength from '../../../components/ExceededCommentLength';
 
 const propTypes = {
     /** All the data of the action */
@@ -240,6 +241,7 @@ class ReportActionItemMessageEdit extends React.Component {
                         onPress={this.publishDraft}
                         text={this.props.translate('common.saveChanges')}
                     />
+                    <ExceededCommentLength commentLength={this.state.draft.length} />
                 </View>
             </View>
         );

From 4d5ab690c8d3b7b1919c23a9482788f5ab5b8346 Mon Sep 17 00:00:00 2001
From: puneet <puneet.here121@gmail.com>
Date: Wed, 19 Oct 2022 19:44:02 -0700
Subject: [PATCH 2/4] disable saving the comment when character limit has
 exceeded

---
 src/pages/home/report/ReportActionItemMessageEdit.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index bb2cb4e826b9..80b0e1336a68 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -20,6 +20,7 @@ import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu'
 import VirtualKeyboard from '../../../libs/VirtualKeyboard';
 import reportPropTypes from '../../reportPropTypes';
 import ExceededCommentLength from '../../../components/ExceededCommentLength';
+import CONST from '../../../CONST';
 
 const propTypes = {
     /** All the data of the action */
@@ -179,6 +180,9 @@ class ReportActionItemMessageEdit extends React.Component {
         }
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
+            if (this.state.draft.length > CONST.MAX_COMMENT_LENGTH) {
+                return;
+            }
             this.publishDraft();
         } else if (e.key === 'Escape') {
             e.preventDefault();
@@ -187,6 +191,7 @@ class ReportActionItemMessageEdit extends React.Component {
     }
 
     render() {
+        const hasExceededMaxCommentLength = this.state.draft.length > CONST.MAX_COMMENT_LENGTH;
         return (
             <View style={styles.chatItemMessage}>
                 <View style={[styles.chatItemComposeBox, styles.flexRow, styles.chatItemComposeBoxColor]}>
@@ -236,6 +241,7 @@ class ReportActionItemMessageEdit extends React.Component {
                     <Button
                         small
                         success
+                        isDisabled={hasExceededMaxCommentLength}
                         nativeID={this.saveButtonID}
                         style={[styles.mr2]}
                         onPress={this.publishDraft}

From 56fab6d31e56a5d186238b35c83a76e9436647fe Mon Sep 17 00:00:00 2001
From: puneet <puneet.here121@gmail.com>
Date: Wed, 19 Oct 2022 19:46:14 -0700
Subject: [PATCH 3/4] use red border when in error state

---
 src/pages/home/report/ReportActionItemMessageEdit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 80b0e1336a68..353b34adfb1a 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -194,7 +194,7 @@ class ReportActionItemMessageEdit extends React.Component {
         const hasExceededMaxCommentLength = this.state.draft.length > CONST.MAX_COMMENT_LENGTH;
         return (
             <View style={styles.chatItemMessage}>
-                <View style={[styles.chatItemComposeBox, styles.flexRow, styles.chatItemComposeBoxColor]}>
+                <View style={[styles.chatItemComposeBox, styles.flexRow, styles.chatItemComposeBoxColor, hasExceededMaxCommentLength && styles.borderColorDanger]}>
                     <Composer
                         multiline
                         ref={(el) => {

From a726968c18ce486810b8cb31bad4ad6269a24472 Mon Sep 17 00:00:00 2001
From: puneet <puneet.here121@gmail.com>
Date: Sat, 22 Oct 2022 03:41:19 -0700
Subject: [PATCH 4/4] move comment exceed logic to publishDraft

---
 src/pages/home/report/ReportActionItemMessageEdit.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 353b34adfb1a..2f993268562e 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -133,6 +133,11 @@ class ReportActionItemMessageEdit extends React.Component {
      * the new content.
      */
     publishDraft() {
+        // Do nothing if draft exceed the character limit
+        if (this.state.draft.length > CONST.MAX_COMMENT_LENGTH) {
+            return;
+        }
+
         // To prevent re-mount after user saves edit before debounce duration (example: within 1 second), we cancel
         // debounce here.
         this.debouncedSaveDraft.cancel();
@@ -180,9 +185,6 @@ class ReportActionItemMessageEdit extends React.Component {
         }
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
-            if (this.state.draft.length > CONST.MAX_COMMENT_LENGTH) {
-                return;
-            }
             this.publishDraft();
         } else if (e.key === 'Escape') {
             e.preventDefault();