inserted zero width character for emoji selection prevention

src/libs/EmojiUtils.js

@@ -110,6 +110,23 @@ function trimEmojiUnicode(emojiCode) {
     return emojiCode.replace(/(fe0f|1f3fb|1f3fc|1f3fd|1f3fe|1f3ff)$/, '').trim();
 }
 
+/**
+ * Validates first character is emoji in text string
+ *
+ * @param {String} message
+ * @returns {Boolean}
+ */
+function firstLetterIsEmoji(message) {
+    const trimmedMessage = Str.replaceAll(message.replace(/ /g, ''), '\n', '');
+    const match = trimmedMessage.match(CONST.REGEX.EMOJIS);
+
+    if (!match) {
+        return false;
+    }
+
+    return trimmedMessage.indexOf(match[0]) === 0;
+}
+
 /**
  * Validates that this message contains only emojis
  *
@@ -497,4 +514,5 @@ export {
     replaceAndExtractEmojis,
     extractEmojis,
     getAddedEmojis,
+    firstLetterIsEmoji,
 };

src/pages/home/report/ReportActionItemFragment.js

@@ -18,6 +18,7 @@ import CONST from '../../../CONST';
 import editedLabelStyles from '../../../styles/editedLabelStyles';
 import UserDetailsTooltip from '../../../components/UserDetailsTooltip';
 import avatarPropTypes from '../../../components/avatarPropTypes';
+import * as Browser from '../../../libs/Browser';
 
 const propTypes = {
     /** Users accountID */
@@ -66,6 +67,9 @@ const propTypes = {
 
     /** localization props */
     ...withLocalizePropTypes,
+
+    /** Should the comment have the appearance of being grouped with the previous comment? */
+    displayAsGroup: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -82,9 +86,28 @@ const defaultProps = {
     delegateAccountID: 0,
     actorIcon: {},
     isThreadParentMessage: false,
+    displayAsGroup: false,
 };
 
 function ReportActionItemFragment(props) {
+    /**
+     * Checks text element for presence of emoji as first character
+     * and insert Zero-Width character to avoid selection issue
+     * mentioned here https://github.com/Expensify/App/issues/29021
+     *
+     * @param {String} text
+     * @param {Boolean} displayAsGroup
+     * @returns {ReactNode | null} Text component with zero width character
+     */
+
+    function checkForEmojiForSelection(text, displayAsGroup) {
+        const firstLetterIsEmoji = EmojiUtils.firstLetterIsEmoji(text);
+        if (firstLetterIsEmoji && !displayAsGroup && !Browser.isMobile()) {
+            return <Text>&#x200b;</Text>;
+        }
+        return null;
+    }
+
     switch (props.fragment.type) {
         case 'COMMENT': {
             const {html, text} = props.fragment;
@@ -116,6 +139,7 @@ function ReportActionItemFragment(props) {
 
             return (
                 <Text style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style]}>
+                    {checkForEmojiForSelection(text, props.displayAsGroup)}
                     <Text
                         selectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
                         style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style, isPendingDelete ? styles.offlineFeedback.deleted : undefined]}

src/pages/home/report/ReportActionItemMessage.js

@@ -61,6 +61,7 @@ function ReportActionItemMessage(props) {
                         source={lodashGet(props.action, 'originalMessage.source')}
                         accountID={props.action.actorAccountID}
                         style={props.style}
+                        displayAsGroup={props.displayAsGroup}
                     />
                 ))
             ) : (