From 46b7aa703534199bcfd76a3a47fa982139686ccd Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 26 May 2022 08:28:20 -1000
Subject: [PATCH] reset composer state when sidebar opens

---
 src/pages/home/report/ReportActionCompose.js         | 6 ++++++
 src/pages/home/report/ReportActionItemMessageEdit.js | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index a3f2c17ab409..350238638e37 100755
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -45,6 +45,7 @@ import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton
 import VirtualKeyboard from '../../../libs/VirtualKeyboard';
 import canUseTouchScreen from '../../../libs/canUseTouchscreen';
 import networkPropTypes from '../../../components/networkPropTypes';
+import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
 
 const propTypes = {
     /** Beta features list */
@@ -159,6 +160,11 @@ class ReportActionCompose extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
+        const sidebarOpened = !prevProps.isDrawerOpen && this.props.isDrawerOpen;
+        if (sidebarOpened) {
+            toggleReportActionComposeView(true, true);
+        }
+
         // We want to focus or refocus the input when a modal has been closed and the underlying screen is focused.
         // We avoid doing this on native platforms since the software keyboard popping
         // open creates a jarring and broken UX.
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 82866f71df2d..7933f7dc50b8 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -72,6 +72,7 @@ class ReportActionItemMessageEdit extends React.Component {
         this.triggerSaveOrCancel = this.triggerSaveOrCancel.bind(this);
         this.onSelectionChange = this.onSelectionChange.bind(this);
         this.addEmojiToTextBox = this.addEmojiToTextBox.bind(this);
+        this.saveButtonID = 'saveButton';
 
         const parser = new ExpensiMark();
         const draftMessage = parser.htmlToMarkdown(this.props.draftMessage);
@@ -212,7 +213,7 @@ class ReportActionItemMessageEdit extends React.Component {
                         }}
                         onBlur={(event) => {
                             // Return to prevent re-render when save button is pressed which cancels the onPress event by re-rendering
-                            if (lodashGet(event, 'nativeEvent.relatedTarget.id') === 'saveButton') {
+                            if (lodashGet(event, 'nativeEvent.relatedTarget.id') === this.saveButtonID) {
                                 return;
                             }
 
@@ -240,11 +241,10 @@ class ReportActionItemMessageEdit extends React.Component {
                     <Button
                         small
                         success
-                        nativeID="saveButton"
+                        nativeID={this.saveButtonID}
                         style={[styles.mr2]}
                         onPress={() => {
                             this.publishDraft();
-                            toggleReportActionComposeView(true, VirtualKeyboard.shouldAssumeIsOpen());
                         }}
                         text={this.props.translate('common.saveChanges')}
                     />