[Payment 2025-02-05] [$250] Start chat - User's name containing accent not shown in results if no accent in search query

[vincdargento]

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.0.72.0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team

Action Performed:

precondition: there is a user with a name containing an accent mark e.g. Álex, Timón, D'artgnan

1. Go to https://staging.new.expensify.com/ and log in
2. Click on FAB > Start a chat
3. Enter a user's name without an accent mark, e.g. Álex, Timón

Expected Result:

User is displayed in the search results

Actual Result:

User is not displayed in the the search results unless the accent mark is entered. However, when setting an address in Profile, countries that have diacritics are shown when searching without them.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021869454978810524666
• Upwork Job ID: 1869454978810524666
• Last Price Increase: 2024-12-18
• Automatic offers:
• nyomanjyotisa | Contributor | 105550541

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

Triggered auto assignment to @strepanier03 (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.

[nyomanjyotisa]

Edited by proposal-police: This proposal was edited at 2024-12-06 05:19:16 UTC.

Proposal

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

Start chat - User's name containing accent not shown in results if no accent in search query

What is the root cause of that problem?

We don't sanitize the search term to removes diacritical marks like we did in the country selector and we don't sanitize the data during the filter

App/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.tsx

Line 35 in 840c227

searchValue: StringUtils.sanitizeString(`${countryISO}${countryName}`),

App/src/libs/OptionsListUtils.ts

Lines 1630 to 1665 in 840c227

	const matchResults = searchTerms.reduceRight((items, term) => {
	const recentReports = filterArrayByMatch(items.recentReports, term, (item) => {
	const values: string[] = [];
	if (item.text) {
	values.push(item.text);
	}
	if (item.login) {
	values.push(item.login);
	values.push(item.login.replace(CONST.EMAIL_SEARCH_REGEX, ''));
	}
	if (item.isThread) {
	if (item.alternateText) {
	values.push(item.alternateText);
	}
	} else if (!!item.isChatRoom || !!item.isPolicyExpenseChat) {
	if (item.subtitle) {
	values.push(item.subtitle);
	}
	}
	return uniqFast(values);
	});
	const personalDetails = filterArrayByMatch(items.personalDetails, term, (item) => uniqFast(getPersonalDetailSearchTerms(item)));
	const currentUserOptionSearchText = items.currentUserOption ? uniqFast(getCurrentUserSearchTerms(items.currentUserOption)).join(' ') : '';
	const currentUserOption = isSearchStringMatch(term, currentUserOptionSearchText) ? items.currentUserOption : null;
	return {
	recentReports: recentReports ?? [],
	personalDetails: personalDetails ?? [],
	userToInvite: null,
	currentUserOption,
	};
	}, options);

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

Sanitize the search term and the data while filtering

Change this code to the following

See updated code

    const matchResults = searchTerms.reduceRight((items, term) => {
        const sanitizedTerm = StringUtils.sanitizeString(term);
    
        const recentReports = filterArrayByMatch(items.recentReports, sanitizedTerm, (item) => {
            const values: string[] = [];
            if (item.text) {
                values.push(StringUtils.sanitizeString(item.text));
            }
    
            if (item.login) {
                values.push(StringUtils.sanitizeString(item.login));
                values.push(StringUtils.sanitizeString(item.login.replace(CONST.EMAIL_SEARCH_REGEX, '')));
            }
    
            if (item.isThread) {
                if (item.alternateText) {
                    values.push(StringUtils.sanitizeString(item.alternateText));
                }
            } else if (!!item.isChatRoom || !!item.isPolicyExpenseChat) {
                if (item.subtitle) {
                    values.push(StringUtils.sanitizeString(item.subtitle));
                }
            }
    
            return uniqFast(values);
        });
    
        const personalDetails = filterArrayByMatch(items.personalDetails, sanitizedTerm, (item) =>
            uniqFast(getPersonalDetailSearchTerms(item).map(StringUtils.sanitizeString))
        );
    
        const currentUserOptionSearchText = items.currentUserOption
            ? uniqFast(getCurrentUserSearchTerms(items.currentUserOption).map(StringUtils.sanitizeString)).join(' ')
            : '';
    
        const currentUserOption = isSearchStringMatch(sanitizedTerm, currentUserOptionSearchText)
            ? items.currentUserOption
            : null;
    
        return {
            recentReports: recentReports ?? [],
            personalDetails: personalDetails ?? [],
            userToInvite: null,
            currentUserOption,
        };
    }, options);

Also we need to update the BE accordingly as well, and sanitize the searchInput param if needed

POC

New-Expensify.36.mp4

What alternative solutions did you explore? (Optional)

Same solution as the main solution, but use StringUtils.normalizeAccents instead of StringUtils.sanitizeString

[melvin-bot]

@strepanier03 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[strepanier03]

I am having a hard time confirming the expected behavior as well on Mac/Chrome.

I created an account with the name Álex Timón D'artgnan.

• When I search any portion of Álex Timón D'artgnan, or the whole name, I get no results.
• It's also true I get no results when searching Alex Timon Dartgnan either.

[melvin-bot]

@strepanier03 Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@strepanier03 Still overdue 6 days?! Let's take care of this!

[melvin-bot]

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