[$250] ComposeBox - When you click on the mention again, extra characters appear

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.1.32-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: No, reproducible on hybrid only
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5995329
Email or phone of affected tester (no customers): sustinov@applausemail.com
Issue reported by: Applause Internal Team
Device used: Macbook/13.7.5/Chrome, OnePlus 9 PRO/Android 14/Chrome, iPhone 12 PRO/iOS 18.4.1
App Component: Chat Report View

Action Performed:

1. Open https://staging.new.expensify.com
2. Log in with any HT account
3. Go to any conversation or create one
4. In the Compose box, type “ @ ”
5. Select any user to mention or enter any username
6. Click on the login of the user in the mention
7. In the window that appears, click on the same user again
8. Repeat steps 6-7 several times

Expected Result:

When you click on the mention again, nothing should change

Actual Result:

When you click on a mention again, extra characters appear at the end of the mention.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021915530953266836404
• Upwork Job ID: 1915530953266836404
• Last Price Increase: 2025-04-24

Issue Owner

Current Issue Owner: @hoangzinh

[melvin-bot]

Triggered auto assignment to @lydiabarclay (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• When a user clicks on a mention suggestion (e.g., @abcd@gmail.com) after partially typing it (e.g., @abcd), the mention is inserted correctly, but extra characters from the original input (like gmail.com) remain after the inserted mention. This results in duplicated or malformed mentions like @abcd@gmail.com gmail.com.

What is the root cause of that problem?

• The issue stems from how the commentAfterMention is computed when inserting the selected mention.
• Currently, the logic slices the comment based on a fixed offset after the @ symbol — it doesn't account for the full original mention text (like @abcd@gmail.com). As a result, the remaining part of the original input (e.g., gmail.com) gets preserved and appended after the newly inserted mention.

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

Lines 196 to 218 in d629de0

	const insertSelectedMention = useCallback(
	(highlightedMentionIndexInner: number) => {
	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 commentAfterMention = value.slice(suggestionValues.atSignIndex + suggestionValues.mentionPrefix.length + 1);
	updateComment(`${commentBeforeAtSign}${mentionCode} ${trimLeadingSpace(commentAfterMention)}`, true);
	const selectionPosition = suggestionValues.atSignIndex + mentionCode.length + CONST.SPACE_LENGTH;
	setSelection({
	start: selectionPosition,
	end: selectionPosition,
	});
	suggestionInsertionIndexRef.current = selectionPosition;
	setSuggestionValues((prevState) => ({
	...prevState,
	suggestedMentions: [],
	shouldShowSuggestionMenu: false,
	}));
	},

What changes do you think we should make in order to solve the problem?

• Instead of slicing a fixed number of characters after the @, dynamically determine the length of the original mention string (e.g., @abcd@gmail.com) by matching the text from atSignIndex.
• Then, slice the value only after that full match to get the accurate commentAfterMention.
• This ensures we don’t re-append any part of the original partial mention.

    function getOriginalMentionText(valuee: string, atSignIndex: number) {
        const rest = valuee.slice(atSignIndex);
        const mentionMatch = rest.match(/^[@\w.\-+]+/); // capture till space or special characters not in emails
        return mentionMatch?.[0] ?? '';
    }

    /**
     * Replace the code of mention and update selection
     */
    const insertSelectedMention = useCallback(
        (highlightedMentionIndexInner: number) => {
            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 commentAfterMention = value.slice(suggestionValues.atSignIndex + suggestionValues.mentionPrefix.length + 1);

            const originalMention = getOriginalMentionText(value, suggestionValues.atSignIndex); // helper function to extract original mention
            const commentAfterMention = value.slice(suggestionValues.atSignIndex + originalMention.length);

            updateComment(`${commentBeforeAtSign}${mentionCode} ${trimLeadingSpace(commentAfterMention)}`, true);
            const selectionPosition = suggestionValues.atSignIndex + mentionCode.length + CONST.SPACE_LENGTH;
            setSelection({
                start: selectionPosition,
                end: selectionPosition,
            });
            suggestionInsertionIndexRef.current = selectionPosition;
            setSuggestionValues((prevState) => ({
                ...prevState,
                suggestedMentions: [],
                shouldShowSuggestionMenu: false,
            }));
        },
        [value, suggestionValues.atSignIndex, suggestionValues.suggestedMentions, suggestionValues.prefixType, getMentionCode, updateComment, setSelection],
    );

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• We can create test for insertSelectedMention to test different scenarios.

What alternative solutions did you explore? (Optional)

N/A

Result

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021915530953266836404

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @hoangzinh (External)