Merge pull request Expensify#88372 from ryntgh/issue/85984

fix: First @mention disappears when adding a second mention at the beginning of text

Author: AndrewGable

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

@@ -186,14 +186,67 @@ function SuggestionMention({
      */
     const insertSelectedMention = useCallback(
         (highlightedMentionIndexInner: number) => {
+            const isPrivateDomainShortMention = (token: string): boolean => {
+                if (!token.startsWith('@')) {
+                    return false;
+                }
+                const currentLogin = currentUserPersonalDetails.login ?? '';
+                return Object.values(personalDetails ?? {}).some(
+                    (detail) =>
+                        !!detail?.login &&
+                        areEmailsFromSamePrivateDomain(detail.login, currentLogin) &&
+                        `@${formatLoginPrivateDomain(detail.login, detail.login)}`.toLowerCase() === token.toLowerCase(),
+                );
+            };
+
+            const isCompleteAtMention = (token: string): boolean => {
+                if (!token.startsWith('@')) {
+                    return false;
+                }
+                const withoutAt = token.slice(1);
+                return (
+                    Str.isValidEmail(withoutAt) ||
+                    token.toLowerCase() === CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT.toLowerCase() ||
+                    Str.isValidPhoneFormat(withoutAt) ||
+                    isPrivateDomainShortMention(token)
+                );
+            };
+
+            const findTrailingMentionIndex = (scannedMention: string, minIndex: number): number => {
+                for (let i = scannedMention.length - 1; i >= minIndex; i--) {
+                    const trigger = scannedMention[i];
+                    if (trigger !== '@' && trigger !== '#') {
+                        continue;
+                    }
+
+                    const token = scannedMention.slice(i);
+                    if (trigger === '@' && isCompleteAtMention(token)) {
+                        return i;
+                    }
+                    if (trigger === '#' && isValidRoomName(token)) {
+                        return i;
+                    }
+                }
+                return -1;
+            };
+
             const commentBeforeAtSign = value.slice(0, suggestionValues.atSignIndex);
             const mentionObject = suggestionValues.suggestedMentions.at(highlightedMentionIndexInner);
             if (!mentionObject || highlightedMentionIndexInner === -1) {
                 return;
             }
 
             const mentionCode = getMentionCode(mentionObject, suggestionValues.prefixType);
-            const originalMention = getOriginalMentionText(value, suggestionValues.atSignIndex, StringUtils.countWhiteSpaces(suggestionValues.mentionPrefix));
+            const scannedMention = getOriginalMentionText(value, suggestionValues.atSignIndex, StringUtils.countWhiteSpaces(suggestionValues.mentionPrefix));
+            const typedMentionLength = suggestionValues.prefixType.length + suggestionValues.mentionPrefix.length;
+
+            let originalMention = scannedMention;
+            if (scannedMention.length > typedMentionLength) {
+                const trailingStart = findTrailingMentionIndex(scannedMention, typedMentionLength);
+                if (trailingStart !== -1) {
+                    originalMention = scannedMention.slice(0, trailingStart);
+                }
+            }
 
             // We split trailing dot from the mention token so selecting `@a.` can become `@adam.`
             // (preserve sentence punctuation) instead of consuming the `.` into the replacement.
@@ -230,7 +283,19 @@ function SuggestionMention({
                 shouldShowSuggestionMenu: false,
             }));
         },
-        [value, suggestionValues.atSignIndex, suggestionValues.suggestedMentions, suggestionValues.prefixType, getMentionCode, updateComment, setSelection, suggestionValues.mentionPrefix],
+        [
+            value,
+            suggestionValues.atSignIndex,
+            suggestionValues.suggestedMentions,
+            suggestionValues.prefixType,
+            getMentionCode,
+            updateComment,
+            setSelection,
+            suggestionValues.mentionPrefix,
+            currentUserPersonalDetails.login,
+            personalDetails,
+            formatLoginPrivateDomain,
+        ],
     );
 
     /**

tests/unit/SuggestionMentionTest.tsx

@@ -324,4 +324,226 @@ describe('SuggestionMention', () => {
             expect(mentions.map((mention) => mention.handle)).toEqual(['ua@example.com', 'ub@example.com', 'uc@example.com']);
         });
     });
+
+    it('preserves the first mention when a second mention is inserted before it', async () => {
+        mockPersonalDetails = {};
+        mockPersonalDetails[2] = {
+            accountID: 2,
+            login: 'adam@example.com',
+            firstName: 'Adam',
+            lastName: 'Tester',
+        };
+        mockPersonalDetails[3] = {
+            accountID: 3,
+            login: 'bob@example.com',
+            firstName: 'Bob',
+            lastName: 'Tester',
+        };
+
+        const updateComment = jest.fn();
+        const {setSelection} = renderSuggestionMention('@b@adam@example.com ', updateComment, {start: 2, end: 2});
+
+        await waitFor(() => expect(mockMentionSuggestionsSpy).toHaveBeenCalled());
+        const {onSelect} = getLastMentionSuggestionsProps();
+
+        act(() => onSelect(0));
+
+        expect(updateComment).toHaveBeenCalledWith('@bob@example.com @adam@example.com ', true);
+        expect(setSelection).toHaveBeenCalledWith({start: 17, end: 17});
+    });
+
+    it('preserves a trailing @here mention when inserting a new mention before it', async () => {
+        mockPersonalDetails = {};
+        mockPersonalDetails[2] = {
+            accountID: 2,
+            login: 'adam@example.com',
+            firstName: 'Adam',
+            lastName: 'Tester',
+        };
+
+        const updateComment = jest.fn();
+        const {setSelection} = renderSuggestionMention('@adam@here', updateComment, {start: 5, end: 5});
+
+        await waitFor(() => expect(mockMentionSuggestionsSpy).toHaveBeenCalled());
+        const {onSelect} = getLastMentionSuggestionsProps();
+
+        act(() => onSelect(0));
+
+        expect(updateComment).toHaveBeenCalledWith('@adam@example.com @here', true);
+        expect(setSelection).toHaveBeenCalledWith({start: 18, end: 18});
+    });
+
+    it('preserves a trailing phone number mention when inserting a new mention before it', async () => {
+        mockPersonalDetails = {};
+        mockPersonalDetails[2] = {
+            accountID: 2,
+            login: 'adam@example.com',
+            firstName: 'Adam',
+            lastName: 'Tester',
+        };
+
+        const updateComment = jest.fn();
+        const {setSelection} = renderSuggestionMention('@adam@+14404589784', updateComment, {start: 5, end: 5});
+
+        await waitFor(() => expect(mockMentionSuggestionsSpy).toHaveBeenCalled());
+        const {onSelect} = getLastMentionSuggestionsProps();
+
+        act(() => onSelect(0));
+
+        expect(updateComment).toHaveBeenCalledWith('@adam@example.com @+14404589784', true);
+        expect(setSelection).toHaveBeenCalledWith({start: 18, end: 18});
+    });
+
+    it('preserves a trailing private domain short mention when inserting a new mention before it', async () => {
+        mockPersonalDetails = {};
+        mockPersonalDetails[2] = {
+            accountID: 2,
+            login: 'adam@example.com',
+            firstName: 'Adam',
+            lastName: 'Tester',
+        };
+        mockPersonalDetails[3] = {
+            accountID: 3,
+            login: 'charlie@company.com',
+            firstName: 'Charlie',
+            lastName: 'Tester',
+        };
+
+        // Override to a private domain so charlie@company.com shows as @charlie in the composer
+        mockUseCurrentUserPersonalDetails.mockReturnValue({accountID: 1, login: 'current@company.com'});
+
+        const updateComment = jest.fn();
+        const {setSelection} = renderSuggestionMention('@adam@charlie', updateComment, {start: 5, end: 5});
+
+        await waitFor(() => expect(mockMentionSuggestionsSpy).toHaveBeenCalled());
+        const {onSelect} = getLastMentionSuggestionsProps();
+
+        act(() => onSelect(0));
+
+        expect(updateComment).toHaveBeenCalledWith('@adam@example.com @charlie', true);
+        expect(setSelection).toHaveBeenCalledWith({start: 18, end: 18});
+    });
+
+    it('preserves a trailing #room mention when inserting a new mention before it', async () => {
+        mockPersonalDetails = {};
+        mockPersonalDetails[2] = {
+            accountID: 2,
+            login: 'adam@example.com',
+            firstName: 'Adam',
+            lastName: 'Tester',
+        };
+
+        const updateComment = jest.fn();
+        const {setSelection} = renderSuggestionMention('@adam#admins', updateComment, {start: 5, end: 5});
+
+        await waitFor(() => expect(mockMentionSuggestionsSpy).toHaveBeenCalled());
+        const {onSelect} = getLastMentionSuggestionsProps();
+
+        act(() => onSelect(0));
+
+        expect(updateComment).toHaveBeenCalledWith('@adam@example.com #admins', true);
+        expect(setSelection).toHaveBeenCalledWith({start: 18, end: 18});
+    });
+
+    it('removes junk between the new mention and a trailing complete mention', async () => {
+        mockPersonalDetails = {};
+        mockPersonalDetails[2] = {
+            accountID: 2,
+            login: 'alice@example.com',
+            firstName: 'Alice',
+            lastName: 'Tester',
+        };
+
+        const updateComment = jest.fn();
+        // "@alice@exam@alice@example.com" — cursor at index 6 (after "@alice").
+        // The user partially typed "alice" before a stale/duplicate mention.
+        // Inserting the full mention should drop the "@exam" junk and keep the trailing mention.
+        const {setSelection} = renderSuggestionMention('@alice@exam@alice@example.com', updateComment, {start: 6, end: 6});
+
+        await waitFor(() => expect(mockMentionSuggestionsSpy).toHaveBeenCalled());
+        const {onSelect} = getLastMentionSuggestionsProps();
+
+        act(() => onSelect(0));
+
+        expect(updateComment).toHaveBeenCalledWith('@alice@example.com @alice@example.com', true);
+        expect(setSelection).toHaveBeenCalledWith({start: 19, end: 19});
+    });
+
+    it('removes junk between the new mention and a trailing private domain short mention', async () => {
+        mockPersonalDetails = {};
+        mockPersonalDetails[2] = {
+            accountID: 2,
+            login: 'bob@company.com',
+            firstName: 'Bob',
+            lastName: 'Tester',
+        };
+        mockPersonalDetails[3] = {
+            accountID: 3,
+            login: 'charlie@company.com',
+            firstName: 'Charlie',
+            lastName: 'Tester',
+        };
+
+        // Override to a private domain so charlie@company.com shows as @charlie in the composer
+        mockUseCurrentUserPersonalDetails.mockReturnValue({accountID: 1, login: 'current@company.com'});
+
+        const updateComment = jest.fn();
+        // "@b@comp@charlie" — cursor at index 2 (after "@b").
+        // Inserting the full @bob mention should drop the "@comp" junk and keep the trailing @charlie short mention.
+        const {setSelection} = renderSuggestionMention('@b@comp@charlie', updateComment, {start: 2, end: 2});
+
+        await waitFor(() => expect(mockMentionSuggestionsSpy).toHaveBeenCalled());
+        const {onSelect} = getLastMentionSuggestionsProps();
+
+        act(() => onSelect(0));
+
+        expect(updateComment).toHaveBeenCalledWith('@bob @charlie', true);
+        expect(setSelection).toHaveBeenCalledWith({start: 5, end: 5});
+    });
+
+    it('removes junk between the new mention and a trailing phone number mention', async () => {
+        mockPersonalDetails = {};
+        mockPersonalDetails[2] = {
+            accountID: 2,
+            login: 'adam@example.com',
+            firstName: 'Adam',
+            lastName: 'Tester',
+        };
+
+        const updateComment = jest.fn();
+        // "@adam@exam@+14404589784" — cursor at index 5 (after "@adam").
+        // Inserting the full mention should drop the "@exam" junk and keep the trailing phone number mention.
+        const {setSelection} = renderSuggestionMention('@adam@exam@+14404589784', updateComment, {start: 5, end: 5});
+
+        await waitFor(() => expect(mockMentionSuggestionsSpy).toHaveBeenCalled());
+        const {onSelect} = getLastMentionSuggestionsProps();
+
+        act(() => onSelect(0));
+
+        expect(updateComment).toHaveBeenCalledWith('@adam@example.com @+14404589784', true);
+        expect(setSelection).toHaveBeenCalledWith({start: 18, end: 18});
+    });
+
+    it('removes junk between the new mention and a trailing room mention', async () => {
+        mockPersonalDetails = {};
+        mockPersonalDetails[2] = {
+            accountID: 2,
+            login: 'alice@example.com',
+            firstName: 'Alice',
+            lastName: 'Tester',
+        };
+
+        const updateComment = jest.fn();
+        // "@alice@exam#admins" — cursor at index 6 (after "@alice").
+        // Inserting the full mention should drop the "@exam" junk and keep the trailing #admins room mention.
+        const {setSelection} = renderSuggestionMention('@alice@exam#admins', updateComment, {start: 6, end: 6});
+
+        await waitFor(() => expect(mockMentionSuggestionsSpy).toHaveBeenCalled());
+        const {onSelect} = getLastMentionSuggestionsProps();
+
+        act(() => onSelect(0));
+
+        expect(updateComment).toHaveBeenCalledWith('@alice@example.com #admins', true);
+        expect(setSelection).toHaveBeenCalledWith({start: 19, end: 19});
+    });
 });