[Due for payment 2025-03-31] [PAYMENT DUE 3/28][$250] Special characters prevent groups from appearing in search

[m-natarajan]

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.94-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @roryabraham
Slack conversation (hyperlinked to channel name): expensify bugs

Action Performed:

1. Create a group chat including someone with a special character in their name (i.e: Fábio instead of just Fabio)
2. Search for the group chat without the special character (i.e: Fab...)

Expected Result:

The group should show up in search results

Actual Result:

The group doesn't show up. For 1:1 DMs it works and a is normalized to be like á

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

Recording.950.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021887569491644904597
• Upwork Job ID: 1887569491644904597
• Last Price Increase: 2025-02-06
• Automatic offers:
• NJ-2020 | Contributor | 106076136

Issue Owner

Current Issue Owner: @slafortune

[melvin-bot]

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

[daledah]

Proposal

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

The group doesn't show up. For 1:1 DMs it works and a is normalized to be like á

What is the root cause of that problem?

We doesn't support this feature

the searchInput is Fa while the displayName is Fábio, so it doesn't match

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

We should normalize the searchInput and the searchableString

1. Update this line

App/src/hooks/useFastSearchFromOptions.ts

Line 68 in bfb97c5

const searchWords = searchInput.split(' ').sort(); // asc sorted

to

const searchWords = searchInput.normalize("NFD").replace(/\p{Diacritic}/gu, "").split(' ').sort(); // asc sorted

2. Update the searchableString in

App/src/hooks/useFastSearchFromOptions.ts

Line 43 in bfb97c5

return [option.login ?? '', option.login !== displayName ? displayName : ''].join();

and

App/src/hooks/useFastSearchFromOptions.ts

Line 50 in bfb97c5

const searchStringForTree = [option.text ?? '', option.login ?? ''];

                    return [option.login ?? '', option.login !== displayName ? displayName.normalize("NFD").replace(/\p{Diacritic}/gu, "") : ''].join();

...

                    const searchStringForTree = [(option.text ?? '').normalize("NFD").replace(/\p{Diacritic}/gu, ""), option.login ?? ''];

We can consider to normalize subtitle and alternateText as well.

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

We can update test/unit/useFastSearchFromOptions.tsx to cover this case

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[NJ-2020]

Proposal

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

Special characters prevent groups from appearing in search

What is the root cause of that problem?

We do not sanitize the strings here

App/src/hooks/useFastSearchFromOptions.ts

Line 68 in 27780d5

const searchWords = searchInput.split(' ').sort(); // asc sorted

and here

App/src/hooks/useFastSearchFromOptions.ts

Line 43 in 27780d5

return [option.login ?? '', option.login !== displayName ? displayName : ''].join();

and here

App/src/hooks/useFastSearchFromOptions.ts

Line 62 in 27780d5

return searchStringForTree.join();

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

We should sanitize the strings using StringUtils.sanitizeString like we do here

App/src/hooks/useFastSearchFromOptions.ts

Line 68 in 27780d5

const searchWords = searchInput.split(' ').sort(); // asc sorted

const searchWords = StringUtils.sanitizeString(searchInput).split(' ').sort(); // asc sorted

App/src/hooks/useFastSearchFromOptions.ts

Line 43 in 27780d5

return [option.login ?? '', option.login !== displayName ? displayName : ''].join();

return StringUtils.sanitizeString([option.login ?? '', option.login !== displayName ? displayName : ''].join());

App/src/hooks/useFastSearchFromOptions.ts

Line 62 in 27780d5

return searchStringForTree.join();

return StringUtils.sanitizeString(searchStringForTree.join());

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

We should create test function to cover this case inside tests/unit/useFastSearchFromOptions.tsx

describe('useFastSearchFromOptions', () => {
    it('should return reports/personalDetails with non-lating characters', () => {
        const options = {
            currentUserOption: null,
            userToInvite: null,
            personalDetails: [
                {
                    text: 'Fábio',
                    participantsList: [
                        {
                            displayName: 'Fábio',
                        },
                    ],
                },
            ],
            recentReports: [
                {
                    text: 'Fábio (Report)',
                },
            ],
        } as Options;
        const {result} = renderHook(() => useFastSearchFromOptions(options));
        const search = result.current;

        const {personalDetails, recentReports} = search('Fabio');

        expect(personalDetails).toEqual([expect.objectContaining({text: 'Fábio'})]);
        expect(recentReports).toEqual([{text: 'Fábio (Report)'}]);
    });
});

What alternative solutions did you explore? (Optional)

Result

Screen.Recording.2025-02-05.at.10.47.10.mov

[melvin-bot]

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

[melvin-bot]

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