Fix for: Triple clicking an edited message select’s the (edited) label along with the actual message Att# 2

src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js

@@ -5,6 +5,8 @@ import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
 import Text from '../../Text';
 import variables from '../../../styles/variables';
 import themeColors from '../../../styles/themes/default';
+import styles from '../../../styles/styles';
+import editedLabelStyles from '../../../styles/editedLabelStyles';
 
 const propTypes = {
     ...htmlRendererPropTypes,
@@ -19,8 +21,16 @@ const EditedRenderer = (props) => {
             {...defaultRendererProps}
             fontSize={variables.fontSizeSmall}
             color={themeColors.textSupporting}
+            style={[styles.alignItemsBaseline, editedLabelStyles]}
         >
-            {` ${props.translate('reportActionCompose.edited')}`}
+            {/* Native devices do not support margin between nested text */}
+            <Text
+                selectable={false}
+                style={[styles.w1, styles.userSelectNone]}
+            >
+                {' '}
+            </Text>
+            {props.translate('reportActionCompose.edited')}
         </Text>
     );
 };

src/pages/home/report/ReportActionItem.js

@@ -356,6 +356,15 @@ class ReportActionItem extends Component {
                     {(hovered) => (
                         <View accessibilityLabel={this.props.translate('accessibilityHints.chatMessage')}>
                             {this.props.shouldDisplayNewMarker && <UnreadActionIndicator reportActionID={this.props.action.reportActionID} />}
+                            <MiniReportActionContextMenu
+                                reportID={this.props.report.reportID}
+                                reportAction={this.props.action}
+                                isArchivedRoom={ReportUtils.isArchivedRoom(this.props.report)}
+                                displayAsGroup={this.props.displayAsGroup}
+                                isVisible={hovered && !this.props.draftMessage && !hasErrors}
+                                draftMessage={this.props.draftMessage}
+                                isChronosReport={ReportUtils.chatIncludesChronos(this.props.report)}
+                            />
                             <View
                                 style={StyleUtils.getReportActionItemStyle(
                                     hovered || isWhisper || this.state.isContextMenuActive || this.props.draftMessage,
@@ -394,16 +403,6 @@ class ReportActionItem extends Component {
                                     {this.renderReportActionItem(hovered, isWhisper)}
                                 </OfflineWithFeedback>
                             </View>
-                            <MiniReportActionContextMenu
-                                reportID={this.props.report.reportID}
-                                reportAction={this.props.action}
-                                isArchivedRoom={ReportUtils.isArchivedRoom(this.props.report)}
-                                displayAsGroup={this.props.displayAsGroup}
-                                isVisible={hovered && !this.props.draftMessage && !hasErrors}
-                                draftMessage={this.props.draftMessage}
-                                isChronosReport={ReportUtils.chatIncludesChronos(this.props.report)}
-                                childReportActionID={this.props.action.childReportActionID}
-                            />
                         </View>
                     )}
                 </Hoverable>

src/pages/home/report/ReportActionItemFragment.js

@@ -18,6 +18,7 @@ import convertToLTR from '../../../libs/convertToLTR';
 import {withNetwork} from '../../../components/OnyxProvider';
 import CONST from '../../../CONST';
 import applyStrikethrough from '../../../components/HTMLEngineProvider/applyStrikethrough';
+import editedLabelStyles from '../../../styles/editedLabelStyles';
 
 const propTypes = {
     /** The message fragment needing to be displayed */
@@ -124,8 +125,15 @@ const ReportActionItemFragment = (props) => {
                         <Text
                             fontSize={variables.fontSizeSmall}
                             color={themeColors.textSupporting}
+                            style={[styles.alignItemsBaseline, editedLabelStyles]}
                         >
-                            {` ${props.translate('reportActionCompose.edited')}`}
+                            <Text
+                                selectable={false}
+                                style={[styles.w1, styles.userSelectNone]}
+                            >
+                                {' '}
+                            </Text>
+                            {props.translate('reportActionCompose.edited')}
                         </Text>
                     )}
                 </Text>

src/styles/editedLabelStyles/index.js

@@ -0,0 +1,3 @@
+import display from '../utilities/display';
+
+export default {...display.dInlineFlex};

src/styles/editedLabelStyles/index.native.js

@@ -0,0 +1 @@
+export default {};

src/styles/utilities/display.js

@@ -20,6 +20,11 @@ export default {
     dInline: {
         display: 'inline',
     },
+
+    dInlineFlex: {
+        display: 'inline-flex',
+    },
+
     dBlock: {
         display: 'block',
     },