Merge pull request #84105 from ryntgh/issue-83510

Fix: Mentions no longer auto-insert trailing space

Author: Julesssss

src/CONST/index.ts

@@ -4161,6 +4161,7 @@ const CONST = {
         SPECIAL_CHAR: /[,/?"{}[\]()&^%;`$=#<>!*]/g,
         FIRST_SPACE: /.+?(?=\s)/,
         TRAILING_DOTS: /\.$/,
+        STARTS_WITH_PUNCTUATION: /^[.,!?]/,
 
         get SPECIAL_CHAR_OR_EMOJI() {
             return new RegExp(`[~\\n\\s]|(_\\b(?!$))|${this.SPECIAL_CHAR.source}|${this.EMOJI.source}`, 'gu');

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

@@ -242,8 +242,11 @@ function SuggestionMention({
                 suggestionValues.atSignIndex + Math.max(mentionToReplace.length, suggestionValues.mentionPrefix.length + suggestionValues.prefixType.length),
             );
 
-            updateComment(`${commentBeforeAtSign}${mentionCode}${dotToAppend}${trimLeadingSpace(commentAfterMention)}`, true);
-            const selectionPosition = suggestionValues.atSignIndex + mentionCode.length + CONST.SPACE_LENGTH;
+            const trimmedCommentAfterMention = trimLeadingSpace(commentAfterMention);
+            const spacer = !trimmedCommentAfterMention || !CONST.REGEX.STARTS_WITH_PUNCTUATION.test(trimmedCommentAfterMention) ? ' ' : '';
+
+            updateComment(`${commentBeforeAtSign}${mentionCode}${dotToAppend}${spacer}${trimmedCommentAfterMention}`, true);
+            const selectionPosition = suggestionValues.atSignIndex + mentionCode.length + dotToAppend.length + spacer.length;
             setSelection({
                 start: selectionPosition,
                 end: selectionPosition,

tests/unit/SuggestionMentionTest.tsx

@@ -161,7 +161,7 @@ describe('SuggestionMention', () => {
         );
     });
 
-    it('preserves trailing punctuation dot when selected mention does not include dotted prefix', async () => {
+    it('preserves trailing punctuation dot and inserts trailing space when selected mention does not include dotted prefix', async () => {
         mockPersonalDetails = {};
         mockPersonalDetails[2] = {
             accountID: 2,
@@ -178,11 +178,11 @@ describe('SuggestionMention', () => {
 
         act(() => onSelect(0));
 
-        expect(updateComment).toHaveBeenCalledWith('@adam@example.com.', true);
-        expect(setSelection).toHaveBeenCalledWith({start: 18, end: 18});
+        expect(updateComment).toHaveBeenCalledWith('@adam@example.com. ', true);
+        expect(setSelection).toHaveBeenCalledWith({start: 19, end: 19});
     });
 
-    it('does not append an extra trailing dot when selected mention already matches dotted prefix', async () => {
+    it('does not append an extra trailing dot and inserts trailing space when selected mention already matches dotted prefix', async () => {
         mockPersonalDetails = {};
         mockPersonalDetails[2] = {
             accountID: 2,
@@ -199,7 +199,49 @@ describe('SuggestionMention', () => {
 
         act(() => onSelect(0));
 
-        expect(updateComment).toHaveBeenCalledWith('@a.smith@example.com', true);
+        expect(updateComment).toHaveBeenCalledWith('@a.smith@example.com ', true);
         expect(setSelection).toHaveBeenCalledWith({start: 21, end: 21});
     });
+
+    it('does not insert trailing space when mention is followed by a comma (punctuation)', async () => {
+        mockPersonalDetails = {};
+        mockPersonalDetails[2] = {
+            accountID: 2,
+            login: 'adam@example.com',
+            firstName: 'Adam',
+            lastName: 'Tester',
+        };
+
+        const updateComment = jest.fn();
+        const {setSelection} = renderSuggestionMention('@a, thanks', updateComment, {start: 2, end: 2});
+
+        await waitFor(() => expect(mockMentionSuggestionsSpy).toHaveBeenCalled());
+        const {onSelect} = getLastMentionSuggestionsProps();
+
+        act(() => onSelect(0));
+
+        expect(updateComment).toHaveBeenCalledWith('@adam@example.com, thanks', true);
+        expect(setSelection).toHaveBeenCalledWith({start: 17, end: 17});
+    });
+
+    it('inserts trailing space when mention is followed by a regular word', async () => {
+        mockPersonalDetails = {};
+        mockPersonalDetails[2] = {
+            accountID: 2,
+            login: 'adam@example.com',
+            firstName: 'Adam',
+            lastName: 'Tester',
+        };
+
+        const updateComment = jest.fn();
+        const {setSelection} = renderSuggestionMention('@a thanks', updateComment, {start: 2, end: 2});
+
+        await waitFor(() => expect(mockMentionSuggestionsSpy).toHaveBeenCalled());
+        const {onSelect} = getLastMentionSuggestionsProps();
+
+        act(() => onSelect(0));
+
+        expect(updateComment).toHaveBeenCalledWith('@adam@example.com thanks', true);
+        expect(setSelection).toHaveBeenCalledWith({start: 18, end: 18});
+    });
 });