From 1cece211284fc870fc1c2ff35dc1bb268a97def9 Mon Sep 17 00:00:00 2001
From: Terry Sahaidak <tasssik@gmail.com>
Date: Wed, 19 Apr 2023 00:02:22 +0300
Subject: [PATCH 1/6] Move buttons into edit composer

---
 src/pages/home/report/ReportActionItem.js     | 58 +++++++++------
 .../home/report/ReportActionItemDraft.js      | 21 ++++++
 .../report/ReportActionItemMessageEdit.js     | 74 +++++++++++++------
 src/styles/styles.js                          | 15 +++-
 4 files changed, 123 insertions(+), 45 deletions(-)
 create mode 100644 src/pages/home/report/ReportActionItemDraft.js

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index c43da3092177..17c317a07253 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -50,6 +50,7 @@ import * as Expensicons from '../../../components/Icon/Expensicons';
 import Text from '../../../components/Text';
 import DisplayNames from '../../../components/DisplayNames';
 import personalDetailsPropType from '../../personalDetailsPropType';
+import ReportActionItemDraft from './ReportActionItemDraft';
 
 const propTypes = {
     /** Report for this action */
@@ -239,15 +240,46 @@ class ReportActionItem extends Component {
             <>
                 {children}
                 {hasReactions && (
-                    <ReportActionItemReactions
-                        reactions={reactions}
-                        toggleReaction={this.toggleReaction}
-                    />
+                    <View style={this.props.draftMessage ? styles.chatItemReactionsDraftRight : null}>
+                        <ReportActionItemReactions
+                            reactions={reactions}
+                            toggleReaction={this.toggleReaction}
+                        />
+                    </View>
                 )}
             </>
         );
     }
 
+    renderReportActionItem(hovered, isWhisper) {
+        const content = this.renderItemContent(hovered || this.state.isContextMenuActive);
+
+        if (this.props.draftMessage) {
+            return (
+                <ReportActionItemDraft>
+                    {content}
+                </ReportActionItemDraft>
+            );
+        } if (!this.props.displayAsGroup) {
+            return (
+                <ReportActionItemSingle
+                    action={this.props.action}
+                    showHeader={!this.props.draftMessage}
+                    wrapperStyles={[styles.chatItem, isWhisper ? styles.pt1 : {}]}
+                    shouldShowSubscriptAvatar={this.props.shouldShowSubscriptAvatar}
+                    report={this.props.report}
+                >
+                    {content}
+                </ReportActionItemSingle>
+            );
+        }
+        return (
+            <ReportActionItemGrouped wrapperStyles={[styles.chatItem, isWhisper ? styles.pt1 : {}]}>
+                {content}
+            </ReportActionItemGrouped>
+        );
+    }
+
     render() {
         if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
             return <ReportActionItemCreated reportID={this.props.report.reportID} />;
@@ -335,23 +367,7 @@ class ReportActionItem extends Component {
                                             />
                                         </View>
                                     )}
-                                    {!this.props.displayAsGroup
-                                        ? (
-                                            <ReportActionItemSingle
-                                                action={this.props.action}
-                                                showHeader={!this.props.draftMessage}
-                                                wrapperStyles={[styles.chatItem, isWhisper ? styles.pt1 : {}]}
-                                                shouldShowSubscriptAvatar={this.props.shouldShowSubscriptAvatar}
-                                                report={this.props.report}
-                                            >
-                                                {this.renderItemContent(hovered || this.state.isContextMenuActive)}
-                                            </ReportActionItemSingle>
-                                        )
-                                        : (
-                                            <ReportActionItemGrouped wrapperStyles={[styles.chatItem, isWhisper ? styles.pt1 : {}]}>
-                                                {this.renderItemContent(hovered || this.state.isContextMenuActive)}
-                                            </ReportActionItemGrouped>
-                                        )}
+                                    {this.renderReportActionItem(hovered, isWhisper)}
                                 </OfflineWithFeedback>
                             </View>
                         </View>
diff --git a/src/pages/home/report/ReportActionItemDraft.js b/src/pages/home/report/ReportActionItemDraft.js
new file mode 100644
index 000000000000..3639231babaf
--- /dev/null
+++ b/src/pages/home/report/ReportActionItemDraft.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../../../styles/styles';
+
+const propTypes = {
+    /** Children view component for this action item */
+    children: PropTypes.node.isRequired,
+};
+
+const ReportActionItemDraft = props => (
+    <View style={[styles.chatItemDraft]}>
+        <View style={styles.flex1}>
+            {props.children}
+        </View>
+    </View>
+);
+
+ReportActionItemDraft.propTypes = propTypes;
+ReportActionItemDraft.displayName = 'ReportActionItemDraft';
+export default ReportActionItemDraft;
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 8ca6e1c69da6..f15a149b8440 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -1,25 +1,32 @@
 /* eslint-disable rulesdir/onyx-props-must-have-default */
 import lodashGet from 'lodash/get';
 import React from 'react';
-import {InteractionManager, Keyboard, View} from 'react-native';
+import {
+    InteractionManager, Keyboard, Pressable, TouchableOpacity, View,
+} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Str from 'expensify-common/lib/str';
 import reportActionPropTypes from './reportActionPropTypes';
 import styles from '../../../styles/styles';
+import themeColors from '../../../styles/themes/default';
+import * as StyleUtils from '../../../styles/StyleUtils';
 import Composer from '../../../components/Composer';
 import * as Report from '../../../libs/actions/Report';
 import * as ReportScrollManager from '../../../libs/ReportScrollManager';
 import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
 import openReportActionComposeViewWhenClosingMessageEdit from '../../../libs/openReportActionComposeViewWhenClosingMessageEdit';
-import Button from '../../../components/Button';
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
 import compose from '../../../libs/compose';
 import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
+import Icon from '../../../components/Icon';
+import * as Expensicons from '../../../components/Icon/Expensicons';
+import Tooltip from '../../../components/Tooltip';
 import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import * as EmojiUtils from '../../../libs/EmojiUtils';
+import getButtonState from '../../../libs/getButtonState';
 import reportPropTypes from '../../reportPropTypes';
 import ExceededCommentLength from '../../../components/ExceededCommentLength';
 import CONST from '../../../CONST';
@@ -255,9 +262,29 @@ class ReportActionItemMessageEdit extends React.Component {
     render() {
         const hasExceededMaxCommentLength = this.state.hasExceededMaxCommentLength;
         return (
-            <View style={styles.chatItemMessage}>
+            <View style={[styles.chatItemMessage, styles.flexRow]}>
+                <View
+                    style={[styles.justifyContentEnd]}
+                >
+                    <Tooltip text={this.props.translate('common.cancel')}>
+                        <Pressable
+                            style={({hovered, pressed}) => ([styles.chatItemSubmitButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))])}
+                            nativeID={this.cancelButtonID}
+                            onPress={this.deleteDraft}
+                            hitSlop={{
+                                top: 3, right: 3, bottom: 3, left: 3,
+                            }}
+                            disabled={hasExceededMaxCommentLength}
+                        >
+                            {({hovered, pressed}) => (
+                                <Icon src={Expensicons.Close} fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))} />
+                            )}
+                        </Pressable>
+                    </Tooltip>
+                </View>
                 <View
                     style={[
+                        styles.flex1,
                         styles.chatItemComposeBox,
                         styles.flexRow,
                         this.state.isFocused ? styles.chatItemComposeBoxFocusedColor : styles.chatItemComposeBoxColor,
@@ -275,7 +302,7 @@ class ReportActionItemMessageEdit extends React.Component {
                         onKeyPress={this.triggerSaveOrCancel}
                         value={this.state.draft}
                         maxLines={16} // This is the same that slack has
-                        style={[styles.textInputCompose, styles.flex4, styles.editInputComposeSpacing]}
+                        style={[styles.textInputCompose, styles.flex1, styles.editInputComposeSpacing]}
                         onFocus={() => {
                             this.setState({isFocused: true});
                             ReportScrollManager.scrollToIndex({animated: true, index: this.props.index}, true);
@@ -307,26 +334,27 @@ class ReportActionItemMessageEdit extends React.Component {
                         />
                     </View>
 
+                    <View style={styles.alignSelfEnd}>
+                        <Tooltip text={this.props.translate('common.saveChanges')}>
+                            <TouchableOpacity
+                                style={[styles.chatItemSubmitButton,
+                                    (this.state.isCommentEmpty || hasExceededMaxCommentLength) ? undefined : styles.buttonSuccess,
+                                ]}
+
+                                onPress={this.publishDraft}
+                                hitSlop={{
+                                    top: 3, right: 3, bottom: 3, left: 3,
+                                }}
+                                nativeID={this.saveButtonID}
+                                disabled={hasExceededMaxCommentLength}
+                            >
+                                <Icon src={Expensicons.Checkmark} fill={(this.state.isCommentEmpty || hasExceededMaxCommentLength) ? themeColors.icon : themeColors.textLight} />
+                            </TouchableOpacity>
+                        </Tooltip>
+                    </View>
                 </View>
-                <View style={[styles.flexRow, styles.mt1]}>
-                    <Button
-                        small
-                        style={[styles.mr2]}
-                        nativeID={this.cancelButtonID}
-                        onPress={this.deleteDraft}
-                        text={this.props.translate('common.cancel')}
-                    />
-                    <Button
-                        small
-                        success
-                        isDisabled={hasExceededMaxCommentLength}
-                        nativeID={this.saveButtonID}
-                        style={[styles.mr2]}
-                        onPress={this.publishDraft}
-                        text={this.props.translate('common.saveChanges')}
-                    />
-                    <ExceededCommentLength comment={this.state.draft} onExceededMaxCommentLength={this.setExceededMaxCommentLength} />
-                </View>
+
+                <ExceededCommentLength comment={this.state.draft} onExceededMaxCommentLength={this.setExceededMaxCommentLength} />
             </View>
         );
     }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index d5cc518300dc..3d151758fe86 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1491,6 +1491,19 @@ const styles = {
         flex: 1,
     },
 
+    chatItemDraft: {
+        display: 'flex',
+        flexDirection: 'row',
+        paddingTop: 8,
+        paddingBottom: 8,
+        paddingLeft: 20,
+        paddingRight: 20,
+    },
+
+    chatItemReactionsDraftRight: {
+        marginLeft: 52,
+    },
+
     // Be extremely careful when editing the compose styles, as it is easy to introduce regressions.
     // Make sure you run the following tests against any changes: #12669
     textInputCompose: addOutlineWidth({
@@ -1523,7 +1536,7 @@ const styles = {
 
     editInputComposeSpacing: {
         backgroundColor: themeColors.transparent,
-        marginVertical: 6,
+        marginVertical: 8,
     },
 
     // composer padding should not be modified unless thoroughly tested against the cases in this PR: #12669

From a9ae3f2c22c3098e9a2c05ff73b02f1dc481d7a0 Mon Sep 17 00:00:00 2001
From: Terry Sahaidak <tasssik@gmail.com>
Date: Wed, 19 Apr 2023 17:15:32 +0300
Subject: [PATCH 2/6] Follow same spacing on android as ReportActionComposer

---
 .../report/ReportActionItemMessageEdit.js     | 76 ++++++++++---------
 1 file changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index f15a149b8440..03b6e649dab8 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -284,47 +284,51 @@ class ReportActionItemMessageEdit extends React.Component {
                 </View>
                 <View
                     style={[
+                        this.state.isFocused ? styles.chatItemComposeBoxFocusedColor : styles.chatItemComposeBoxColor,
+                        styles.flexRow,
                         styles.flex1,
                         styles.chatItemComposeBox,
-                        styles.flexRow,
-                        this.state.isFocused ? styles.chatItemComposeBoxFocusedColor : styles.chatItemComposeBoxColor,
                         hasExceededMaxCommentLength && styles.borderColorDanger,
                     ]}
                 >
-                    <Composer
-                        multiline
-                        ref={(el) => {
-                            this.textInput = el;
-                            this.props.forwardedRef(el);
-                        }}
-                        nativeID={this.messageEditInput}
-                        onChangeText={this.updateDraft} // Debounced saveDraftComment
-                        onKeyPress={this.triggerSaveOrCancel}
-                        value={this.state.draft}
-                        maxLines={16} // This is the same that slack has
-                        style={[styles.textInputCompose, styles.flex1, styles.editInputComposeSpacing]}
-                        onFocus={() => {
-                            this.setState({isFocused: true});
-                            ReportScrollManager.scrollToIndex({animated: true, index: this.props.index}, true);
-                            toggleReportActionComposeView(false, this.props.isSmallScreenWidth);
-                        }}
-                        onBlur={(event) => {
-                            this.setState({isFocused: false});
-                            const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id');
-
-                            // 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, this.emojiButtonID], relatedTargetId)) {
-                                return;
-                            }
-
-                            if (this.messageEditInput === relatedTargetId) {
-                                return;
-                            }
-                            openReportActionComposeViewWhenClosingMessageEdit(this.props.isSmallScreenWidth);
-                        }}
-                        selection={this.state.selection}
-                        onSelectionChange={this.onSelectionChange}
-                    />
+                    <View style={styles.textInputComposeSpacing}>
+                        <Composer
+                            multiline
+                            ref={(el) => {
+                                this.textInput = el;
+                                this.props.forwardedRef(el);
+                            }}
+                            nativeID={this.messageEditInput}
+                            onChangeText={this.updateDraft} // Debounced saveDraftComment
+                            onKeyPress={this.triggerSaveOrCancel}
+                            value={this.state.draft}
+                            maxLines={16} // This is the same that slack has
+                            style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]}
+
+                            // textAlignVertical="top"
+                            onFocus={() => {
+                                this.setState({isFocused: true});
+                                ReportScrollManager.scrollToIndex({animated: true, index: this.props.index}, true);
+                                toggleReportActionComposeView(false, this.props.isSmallScreenWidth);
+                            }}
+                            onBlur={(event) => {
+                                this.setState({isFocused: false});
+                                const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id');
+
+                                // 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, this.emojiButtonID], relatedTargetId)) {
+                                    return;
+                                }
+
+                                if (this.messageEditInput === relatedTargetId) {
+                                    return;
+                                }
+                                openReportActionComposeViewWhenClosingMessageEdit(this.props.isSmallScreenWidth);
+                            }}
+                            selection={this.state.selection}
+                            onSelectionChange={this.onSelectionChange}
+                        />
+                    </View>
                     <View style={styles.editChatItemEmojiWrapper}>
                         <EmojiPickerButton
                             isDisabled={this.props.shouldDisableEmojiPicker}

From 14e773c9120ddfd8d1eabacb9810bd7a175bcf2d Mon Sep 17 00:00:00 2001
From: Terry Sahaidak <tasssik@gmail.com>
Date: Wed, 19 Apr 2023 18:06:03 +0300
Subject: [PATCH 3/6] clean-up

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

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 17c317a07253..dc3953ef02c8 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -251,6 +251,12 @@ class ReportActionItem extends Component {
         );
     }
 
+    /**
+     * Get ReportActionItem with a proper wrapper
+     * @param {Boolean} hovered whether the ReportActionItem is hovered
+     * @param {Boolean} isWhisper whether the ReportActionItem is a whisper
+     * @returns {Object} report action item
+     */
     renderReportActionItem(hovered, isWhisper) {
         const content = this.renderItemContent(hovered || this.state.isContextMenuActive);
 
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 03b6e649dab8..9802ab5678c5 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -304,8 +304,6 @@ class ReportActionItemMessageEdit extends React.Component {
                             value={this.state.draft}
                             maxLines={16} // This is the same that slack has
                             style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]}
-
-                            // textAlignVertical="top"
                             onFocus={() => {
                                 this.setState({isFocused: true});
                                 ReportScrollManager.scrollToIndex({animated: true, index: this.props.index}, true);

From be5ab373e62a9fec66967da68e78bcadbff78dea Mon Sep 17 00:00:00 2001
From: Terry Sahaidak <tasssik@gmail.com>
Date: Fri, 21 Apr 2023 13:27:28 +0300
Subject: [PATCH 4/6] Better formatting

---
 src/pages/home/report/ReportActionItem.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index dc3953ef02c8..63374796afb7 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -266,7 +266,9 @@ class ReportActionItem extends Component {
                     {content}
                 </ReportActionItemDraft>
             );
-        } if (!this.props.displayAsGroup) {
+        }
+
+        if (!this.props.displayAsGroup) {
             return (
                 <ReportActionItemSingle
                     action={this.props.action}
@@ -279,6 +281,7 @@ class ReportActionItem extends Component {
                 </ReportActionItemSingle>
             );
         }
+
         return (
             <ReportActionItemGrouped wrapperStyles={[styles.chatItem, isWhisper ? styles.pt1 : {}]}>
                 {content}

From e87637bb9228f4de90285a5d05354e2f693994dd Mon Sep 17 00:00:00 2001
From: Terry Sahaidak <tasssik@gmail.com>
Date: Fri, 21 Apr 2023 17:49:29 +0300
Subject: [PATCH 5/6] Improve comments


From 3dc45578c25551f5eb60c9bc862bfa6b1b2dbd95 Mon Sep 17 00:00:00 2001
From: Terry Sahaidak <tasssik@gmail.com>
Date: Thu, 4 May 2023 13:30:44 +0300
Subject: [PATCH 6/6] Fix ExceededCommentLength and address review feedback

---
 src/pages/home/report/ReportActionItem.js     |   2 +-
 .../report/ReportActionItemMessageEdit.js     | 177 +++++++++---------
 2 files changed, 90 insertions(+), 89 deletions(-)

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 63374796afb7..944ab08220a7 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -240,7 +240,7 @@ class ReportActionItem extends Component {
             <>
                 {children}
                 {hasReactions && (
-                    <View style={this.props.draftMessage ? styles.chatItemReactionsDraftRight : null}>
+                    <View style={this.props.draftMessage ? styles.chatItemReactionsDraftRight : {}}>
                         <ReportActionItemReactions
                             reactions={reactions}
                             toggleReaction={this.toggleReaction}
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 9802ab5678c5..4a2474dadc0e 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -262,102 +262,103 @@ class ReportActionItemMessageEdit extends React.Component {
     render() {
         const hasExceededMaxCommentLength = this.state.hasExceededMaxCommentLength;
         return (
-            <View style={[styles.chatItemMessage, styles.flexRow]}>
-                <View
-                    style={[styles.justifyContentEnd]}
-                >
-                    <Tooltip text={this.props.translate('common.cancel')}>
-                        <Pressable
-                            style={({hovered, pressed}) => ([styles.chatItemSubmitButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))])}
-                            nativeID={this.cancelButtonID}
-                            onPress={this.deleteDraft}
-                            hitSlop={{
-                                top: 3, right: 3, bottom: 3, left: 3,
-                            }}
-                            disabled={hasExceededMaxCommentLength}
-                        >
-                            {({hovered, pressed}) => (
-                                <Icon src={Expensicons.Close} fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))} />
-                            )}
-                        </Pressable>
-                    </Tooltip>
-                </View>
-                <View
-                    style={[
-                        this.state.isFocused ? styles.chatItemComposeBoxFocusedColor : styles.chatItemComposeBoxColor,
-                        styles.flexRow,
-                        styles.flex1,
-                        styles.chatItemComposeBox,
-                        hasExceededMaxCommentLength && styles.borderColorDanger,
-                    ]}
-                >
-                    <View style={styles.textInputComposeSpacing}>
-                        <Composer
-                            multiline
-                            ref={(el) => {
-                                this.textInput = el;
-                                this.props.forwardedRef(el);
-                            }}
-                            nativeID={this.messageEditInput}
-                            onChangeText={this.updateDraft} // Debounced saveDraftComment
-                            onKeyPress={this.triggerSaveOrCancel}
-                            value={this.state.draft}
-                            maxLines={16} // This is the same that slack has
-                            style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]}
-                            onFocus={() => {
-                                this.setState({isFocused: true});
-                                ReportScrollManager.scrollToIndex({animated: true, index: this.props.index}, true);
-                                toggleReportActionComposeView(false, this.props.isSmallScreenWidth);
-                            }}
-                            onBlur={(event) => {
-                                this.setState({isFocused: false});
-                                const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id');
-
-                                // 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, this.emojiButtonID], relatedTargetId)) {
-                                    return;
-                                }
-
-                                if (this.messageEditInput === relatedTargetId) {
-                                    return;
-                                }
-                                openReportActionComposeViewWhenClosingMessageEdit(this.props.isSmallScreenWidth);
-                            }}
-                            selection={this.state.selection}
-                            onSelectionChange={this.onSelectionChange}
-                        />
-                    </View>
-                    <View style={styles.editChatItemEmojiWrapper}>
-                        <EmojiPickerButton
-                            isDisabled={this.props.shouldDisableEmojiPicker}
-                            onModalHide={() => InteractionManager.runAfterInteractions(() => this.textInput.focus())}
-                            onEmojiSelected={this.addEmojiToTextBox}
-                            nativeID={this.emojiButtonID}
-                        />
-                    </View>
-
-                    <View style={styles.alignSelfEnd}>
-                        <Tooltip text={this.props.translate('common.saveChanges')}>
-                            <TouchableOpacity
-                                style={[styles.chatItemSubmitButton,
-                                    (this.state.isCommentEmpty || hasExceededMaxCommentLength) ? undefined : styles.buttonSuccess,
-                                ]}
-
-                                onPress={this.publishDraft}
+            <>
+                <View style={[styles.chatItemMessage, styles.flexRow]}>
+                    <View
+                        style={[styles.justifyContentEnd]}
+                    >
+                        <Tooltip text={this.props.translate('common.cancel')}>
+                            <Pressable
+                                style={({hovered, pressed}) => ([styles.chatItemSubmitButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))])}
+                                nativeID={this.cancelButtonID}
+                                onPress={this.deleteDraft}
                                 hitSlop={{
                                     top: 3, right: 3, bottom: 3, left: 3,
                                 }}
-                                nativeID={this.saveButtonID}
-                                disabled={hasExceededMaxCommentLength}
                             >
-                                <Icon src={Expensicons.Checkmark} fill={(this.state.isCommentEmpty || hasExceededMaxCommentLength) ? themeColors.icon : themeColors.textLight} />
-                            </TouchableOpacity>
+                                {({hovered, pressed}) => (
+                                    <Icon src={Expensicons.Close} fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))} />
+                                )}
+                            </Pressable>
                         </Tooltip>
                     </View>
-                </View>
+                    <View
+                        style={[
+                            this.state.isFocused ? styles.chatItemComposeBoxFocusedColor : styles.chatItemComposeBoxColor,
+                            styles.flexRow,
+                            styles.flex1,
+                            styles.chatItemComposeBox,
+                            hasExceededMaxCommentLength && styles.borderColorDanger,
+                        ]}
+                    >
+                        <View style={styles.textInputComposeSpacing}>
+                            <Composer
+                                multiline
+                                ref={(el) => {
+                                    this.textInput = el;
+                                    this.props.forwardedRef(el);
+                                }}
+                                nativeID={this.messageEditInput}
+                                onChangeText={this.updateDraft} // Debounced saveDraftComment
+                                onKeyPress={this.triggerSaveOrCancel}
+                                value={this.state.draft}
+                                maxLines={16} // This is the same that slack has
+                                style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]}
+                                onFocus={() => {
+                                    this.setState({isFocused: true});
+                                    ReportScrollManager.scrollToIndex({animated: true, index: this.props.index}, true);
+                                    toggleReportActionComposeView(false, this.props.isSmallScreenWidth);
+                                }}
+                                onBlur={(event) => {
+                                    this.setState({isFocused: false});
+                                    const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id');
+
+                                    // 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, this.emojiButtonID], relatedTargetId)) {
+                                        return;
+                                    }
+
+                                    if (this.messageEditInput === relatedTargetId) {
+                                        return;
+                                    }
+                                    openReportActionComposeViewWhenClosingMessageEdit(this.props.isSmallScreenWidth);
+                                }}
+                                selection={this.state.selection}
+                                onSelectionChange={this.onSelectionChange}
+                            />
+                        </View>
+                        <View style={styles.editChatItemEmojiWrapper}>
+                            <EmojiPickerButton
+                                isDisabled={this.props.shouldDisableEmojiPicker}
+                                onModalHide={() => InteractionManager.runAfterInteractions(() => this.textInput.focus())}
+                                onEmojiSelected={this.addEmojiToTextBox}
+                                nativeID={this.emojiButtonID}
+                            />
+                        </View>
+
+                        <View style={styles.alignSelfEnd}>
+                            <Tooltip text={this.props.translate('common.saveChanges')}>
+                                <TouchableOpacity
+                                    style={[styles.chatItemSubmitButton,
+                                        hasExceededMaxCommentLength ? {} : styles.buttonSuccess,
+                                    ]}
+
+                                    onPress={this.publishDraft}
+                                    hitSlop={{
+                                        top: 3, right: 3, bottom: 3, left: 3,
+                                    }}
+                                    nativeID={this.saveButtonID}
+                                    disabled={hasExceededMaxCommentLength}
+                                >
+                                    <Icon src={Expensicons.Checkmark} fill={hasExceededMaxCommentLength ? themeColors.icon : themeColors.textLight} />
+                                </TouchableOpacity>
+                            </Tooltip>
+                        </View>
+                    </View>
 
+                </View>
                 <ExceededCommentLength comment={this.state.draft} onExceededMaxCommentLength={this.setExceededMaxCommentLength} />
-            </View>
+            </>
         );
     }
 }