fix: ComposeBox - When you click on the mention again, extra characters appear.

src/CONST/index.ts

@@ -3600,6 +3600,7 @@ const CONST = {
         HAS_COLON_ONLY_AT_THE_BEGINNING: /^:[^:]+$/,
         HAS_AT_MOST_TWO_AT_SIGNS: /^@[^@]*@?[^@]*$/,
         EMPTY_COMMENT: /^(\s)*$/,
+        SPECIAL_CHAR_MENTION_BREAKER: /[,/?"{}[\]()&^%;`$=<>!*]/g,
         SPECIAL_CHAR: /[,/?"{}[\]()&^%;`$=#<>!*]/g,
         FIRST_SPACE: /.+?(?=\s)/,
 
@@ -3614,7 +3615,8 @@ const CONST = {
         // Define the regular expression pattern to find a potential end of a mention suggestion:
         // It might be a space, a newline character, an emoji, or a special character (excluding underscores & tildes, which might be used in usernames)
         get MENTION_BREAKER() {
-            return new RegExp(`[\\n\\s]|${this.SPECIAL_CHAR.source}|${this.EMOJI.source}`, 'gu');
+            // currently breaks on newline **or** whitespace **or** punctuation/emojis
+            return new RegExp(`[\\n\\s]|${this.SPECIAL_CHAR_MENTION_BREAKER.source}|${this.EMOJI.source}`, 'gu');
         },
 
         get ALL_EMOJIS() {

src/libs/StringUtils/index.ts

@@ -149,6 +149,13 @@ function getUTF8ByteLength(str: string) {
     return bytes.length;
 }
 
+/**
+ * Remove white spaces length from the string
+ */
+function countWhiteSpaces(str: string): number {
+    return (str.match(/\s/g) ?? []).length;
+}
+
 export default {
     sanitizeString,
     isEmptyString,
@@ -165,4 +172,5 @@ export default {
     hash,
     getUTF8ByteLength,
     decodeUnicode,
+    countWhiteSpaces,
 };

src/pages/home/report/ReportActionCompose/SuggestionMention.tsx

@@ -19,6 +19,7 @@ import {areEmailsFromSamePrivateDomain} from '@libs/LoginUtils';
 import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
 import getPolicyEmployeeAccountIDs from '@libs/PolicyEmployeeListUtils';
 import {canReportBeMentionedWithinPolicy, doesReportBelongToWorkspace, getDisplayNameForParticipant, isGroupChat, isReportParticipant} from '@libs/ReportUtils';
+import StringUtils from '@libs/StringUtils';
 import {trimLeadingSpace} from '@libs/SuggestionUtils';
 import {isValidRoomName} from '@libs/ValidationUtils';
 import {searchInServer} from '@userActions/Report';
@@ -92,7 +93,7 @@ function SuggestionMention(
     // eslint-disable-next-line react-compiler/react-compiler
     suggestionValuesRef.current = suggestionValues;
 
-    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: false});
 
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const isMentionSuggestionsMenuVisible = !!suggestionValues.suggestedMentions.length && suggestionValues.shouldShowSuggestionMenu;
@@ -190,6 +191,23 @@ function SuggestionMention(
         [formatLoginPrivateDomain],
     );
 
+    function getOriginalMentionText(inputValue: string, atSignIndex: number, whiteSpacesLength = 0) {
+        const rest = inputValue.slice(atSignIndex);
+
+        // If the search string contains spaces, it's not a simple login/email mention.
+        // In that case, we need to replace all the words the user typed that are part of the mention.
+        // For example, if `rest` is "@Adam Chr and" and "@Adam Chris" is a valid mention,
+        // then `whiteSpacesLength` will be 1, and we should return "@Adam Chr".
+        // The length of this substring will then be used to replace the user's input with the full mention.
+        if (whiteSpacesLength) {
+            const str = rest.split(' ', whiteSpacesLength + 1).join(' ');
+            return rest.slice(0, str.length);
+        }
+
+        const breakerIndex = rest.search(CONST.REGEX.MENTION_BREAKER);
+        return breakerIndex === -1 ? rest : rest.slice(0, breakerIndex);
+    }
+
     /**
      * Replace the code of mention and update selection
      */
@@ -200,8 +218,13 @@ function SuggestionMention(
             if (!mentionObject || highlightedMentionIndexInner === -1) {
                 return;
             }
+
             const mentionCode = getMentionCode(mentionObject, suggestionValues.prefixType);
-            const commentAfterMention = value.slice(suggestionValues.atSignIndex + suggestionValues.mentionPrefix.length + 1);
+            const originalMention = getOriginalMentionText(value, suggestionValues.atSignIndex, StringUtils.countWhiteSpaces(suggestionValues.mentionPrefix));
+
+            const commentAfterMention = value.slice(
+                suggestionValues.atSignIndex + Math.max(originalMention.length, suggestionValues.mentionPrefix.length + suggestionValues.prefixType.length),
+            );
 
             updateComment(`${commentBeforeAtSign}${mentionCode} ${trimLeadingSpace(commentAfterMention)}`, true);
             const selectionPosition = suggestionValues.atSignIndex + mentionCode.length + CONST.SPACE_LENGTH;
@@ -216,16 +239,7 @@ function SuggestionMention(
                 shouldShowSuggestionMenu: false,
             }));
         },
-        [
-            value,
-            suggestionValues.atSignIndex,
-            suggestionValues.suggestedMentions,
-            suggestionValues.prefixType,
-            suggestionValues.mentionPrefix.length,
-            getMentionCode,
-            updateComment,
-            setSelection,
-        ],
+        [value, suggestionValues.atSignIndex, suggestionValues.suggestedMentions, suggestionValues.prefixType, getMentionCode, updateComment, setSelection, suggestionValues.mentionPrefix],
     );
 
     /**