Merge pull request Expensify#18523 from Ollyws/fix2-15194

Fix for: Triple clicking an edited message select’s the (edited) label along with the actual message Att# 2
ojasjadhav2 · May 19, 2023 · 8a3d79c · 8a3d79c
2 parents 2182d0c + dd8c5b4
commit 8a3d79c
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 12 deletions.
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/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>
     );
 };

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -383,6 +383,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,
@@ -421,16 +430,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>

diff --git a/src/pages/home/report/ReportActionItemFragment.js b/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>

diff --git a/src/styles/editedLabelStyles/index.js b/src/styles/editedLabelStyles/index.js
@@ -0,0 +1,3 @@
+import display from '../utilities/display';
+
+export default {...display.dInlineFlex};
diff --git a/src/styles/editedLabelStyles/index.native.js b/src/styles/editedLabelStyles/index.native.js
@@ -0,0 +1 @@
+export default {};
diff --git a/src/styles/utilities/display.js b/src/styles/utilities/display.js
@@ -20,6 +20,11 @@ export default {
     dInline: {
         display: 'inline',
     },
+
+    dInlineFlex: {
+        display: 'inline-flex',
+    },
+
     dBlock: {
         display: 'block',
     },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import display from '../utilities/display';

		export default {...display.dInlineFlex};