[HOLD for payment 2023-08-17] [$1000] Web - Country suggestion does not work with head or trail space

[kbecciv]

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

---

Action Performed:

1. Go to Settings > Profile > Personal details > Home address > Country
2. Type any name with head or trail space

Expected Result:

Should show country suggestion if there is head or trail space

Actual Result:

Country suggestion does not work with head or trail space

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

**Version Number:**1.3.45-8
Reproducible in staging?: y
Reproducible in production?: new feature
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
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-07-26.at.7.25.29.PM.1.mov

Recording.3931.mp4

Expensify/Expensify Issue URL:
Issue reported by: @gadhiyamanan
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690379902974339

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01918263d8bfff6b0e
• Upwork Job ID: 1684585153238552576
• Last Price Increase: 2023-08-03
• Automatic offers:
• gadhiyamanan | Reporter | 25935145

[huzaifa-99]

Proposal

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

We want the country selection to work if there is a head or trail space

What is the root cause of that problem?

Here, we are not using the trimmed value of search

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

There are 2 solutions to this

1. Just dealing with extra spaces: Remove the leading/trailing space from search text when filtering result and show the filtered result, this can be done using the trimmed value of searchValue here and it will fix the bug.

But the search still feels broken as it won't work for some other search text, like when a text has extra spaces in the middle ex: United Arab Emirates. I suggest we just remove any spaces in the search text with empty string when filtering the results. This can be done with a simple regex or str.replaceAll()

2. Deal with extra spaces and other chars: We can remove extra spaces by the above method but some countries have

• brackets ex: Myanmar (Burma), Cocos (Keeling) Islands
• dots ex: St. Lucia, U.S Virgin Islands
• dashes ex: Congo - Kinshasa, Congo - Brazzaville, Timor-Leste
• ampersand ex: St. Kitts & Nevis, St. Vincent & Grenadines
• single quote ex: Côte d'Ivoire

so search values like these will fail

Keeling Islands
US Virgin Islands
Timor Leste
Kitts N
Côte dIvoire

I think we should also remove these by using some regex like /[-'().&\s]/g and when filtering we should remove these chars from the searchValue and the countries text. This will give more accurate results.

Optional:
1- we can omit/add any other chars when filtering
2- the leading/trailing and middle spaces issue is also with the <StateSelectorModal/>, we can also replace leading/trailing and middle spaces from the suggestion when searching in the same manner.
3- to optimize results, we can store the updated text of countries (replacing the chars discussed above) in state and use that when filtering results

What alternative solutions did you explore? (Optional)

N/A

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @danieldoglas (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[danieldoglas]

This doesn't need to be a deploy blocker, so removing the hourly/deployblockercash labels and adding bug