Fix compose box resurfacing issue

src/components/Button.js

@@ -103,6 +103,9 @@ const propTypes = {
 
     /** Whether Button is on active screen */
     isFocused: PropTypes.bool.isRequired,
+
+    /** Id to use for this button */
+    nativeID: PropTypes.string,
 };
 
 const defaultProps = {
@@ -133,6 +136,7 @@ const defaultProps = {
     shouldRemoveRightBorderRadius: false,
     shouldRemoveLeftBorderRadius: false,
     shouldEnableHapticFeedback: false,
+    nativeID: '',
 };
 
 class Button extends Component {
@@ -247,6 +251,7 @@ class Button extends Component {
                     this.props.isDisabled ? {...styles.cursorDisabled, ...styles.noSelect} : {},
                     ...this.additionalStyles,
                 ]}
+                nativeID={this.props.nativeID}
             >
                 {({pressed, hovered}) => (
                     <OpacityView

src/libs/EmojiUtils.js

@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import lodashOrderBy from 'lodash/orderBy';
 import moment from 'moment';
+import Str from 'expensify-common/lib/str';
 import CONST from '../CONST';
 import * as User from './actions/User';
 
@@ -77,7 +78,7 @@ function isSingleEmoji(message) {
  * @returns {Boolean}
  */
 function containsOnlyEmojis(message) {
-    const trimmedMessage = message.replace(/ /g, '').replaceAll('\n', '');
+    const trimmedMessage = Str.replaceAll(message.replace(/ /g, ''), '\n', '');
     const match = trimmedMessage.match(CONST.REGEX.EMOJIS);
 
     if (!match) {

src/libs/toggleReportActionComposeView/index.js

@@ -1,6 +1,6 @@
 import * as Session from '../actions/Session';
 
-export default (shouldShowComposeInput, isSmallScreenWidth) => {
+export default (shouldShowComposeInput, isSmallScreenWidth = true) => {
     if (!isSmallScreenWidth) {
         return;
     }

src/pages/home/ReportScreen.js

@@ -20,6 +20,7 @@ import CONST from '../../CONST';
 import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
 import reportActionPropTypes from './report/reportActionPropTypes';
 import ArchivedReportFooter from '../../components/ArchivedReportFooter';
+import toggleReportActionComposeView from '../../libs/toggleReportActionComposeView';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -151,6 +152,9 @@ class ReportScreen extends React.Component {
             Report.handleInaccessibleReport();
             return;
         }
+
+        // Always reset the state of the composer view when the current reportID changes
+        toggleReportActionComposeView(true);
         Report.updateCurrentlyViewedReportID(reportID);
     }
 

src/pages/home/report/ReportActionCompose.js

@@ -42,6 +42,7 @@ import Tooltip from '../../../components/Tooltip';
 import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
 import VirtualKeyboard from '../../../libs/VirtualKeyboard';
 import canUseTouchScreen from '../../../libs/canUseTouchscreen';
+import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
 import OfflineIndicator from '../../../components/OfflineIndicator';
 import ExceededCommentLength from '../../../components/ExceededCommentLength';
 
@@ -155,6 +156,11 @@ class ReportActionCompose extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
+        const sidebarOpened = !prevProps.isDrawerOpen && this.props.isDrawerOpen;
+        if (sidebarOpened) {
+            toggleReportActionComposeView(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.

src/pages/home/report/ReportActionItemFragment.js

@@ -100,9 +100,9 @@ const ReportActionItemFragment = (props) => {
             // If the only difference between fragment.text and fragment.html is <br /> tags
             // we replace them with line breaks and render it as text, not as html.
             // This is done to render emojis with line breaks between them as text.
-            const differByLineBreaksOnly = props.fragment.html.replaceAll('<br />', ' ') === props.fragment.text;
+            const differByLineBreaksOnly = Str.replaceAll(props.fragment.html, '<br />', ' ') === props.fragment.text;
             if (differByLineBreaksOnly) {
-                const textWithLineBreaks = props.fragment.html.replaceAll('<br />', '\n');
+                const textWithLineBreaks = Str.replaceAll(props.fragment.html, '<br />', '\n');
                 // eslint-disable-next-line no-param-reassign
                 props.fragment = {...props.fragment, text: textWithLineBreaks, html: textWithLineBreaks};
             }

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -1,3 +1,4 @@
+import lodashGet from 'lodash/get';
 import React from 'react';
 import {InteractionManager, View} from 'react-native';
 import PropTypes from 'prop-types';
@@ -71,6 +72,8 @@ 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';
+        this.cancelButtonID = 'cancelButton';
 
         const parser = new ExpensiMark();
         const draftMessage = parser.htmlToMarkdown(this.props.draftMessage);
@@ -126,7 +129,6 @@ class ReportActionItemMessageEdit extends React.Component {
      * allows one to navigate somewhere else and come back to the comment and still have it in edit mode.
      * @param {String} newDraft
      */
-
     debouncedSaveDraft(newDraft) {
         Report.saveReportActionDraft(this.props.reportID, this.props.action.reportActionID, newDraft);
     }
@@ -210,6 +212,14 @@ class ReportActionItemMessageEdit extends React.Component {
                             ReportScrollManager.scrollToIndex({animated: true, index: this.props.index}, true);
                             toggleReportActionComposeView(false, VirtualKeyboard.shouldAssumeIsOpen());
                         }}
+                        onBlur={(event) => {
+                            // Return to prevent re-render when save/cancel button is pressed which cancels the onPress event by re-rendering
+                            if (_.contains([this.saveButtonID, this.cancelButtonID], lodashGet(event, 'nativeEvent.relatedTarget.id'))) {
+                                return;
+                            }
+
+                            toggleReportActionComposeView(true, VirtualKeyboard.shouldAssumeIsOpen());
+                        }}
                         selection={this.state.selection}
                         onSelectionChange={this.onSelectionChange}
                     />
@@ -226,12 +236,14 @@ class ReportActionItemMessageEdit extends React.Component {
                     <Button
                         small
                         style={[styles.mr2]}
+                        nativeID={this.cancelButtonID}
                         onPress={this.deleteDraft}
                         text={this.props.translate('common.cancel')}
                     />
                     <Button
                         small
                         success
+                        nativeID={this.saveButtonID}
                         style={[styles.mr2]}
                         onPress={this.publishDraft}
                         text={this.props.translate('common.saveChanges')}