[$250] [Search v2.1] - App shows not here page when category with emoji is used in search filters

[IuliiaHerets]

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.29-6
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > Categories.
3. Add a category with just an emoji.
4. Go to Search.
5. Click Filters.
6. Click Categories.
7. Select the category with emoji.
8. Click Save.
9. Click View results.

Expected Result:

App will not show not here page.

Actual Result:

App shows not here page when category with emoji is used in search filters.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6592936_1725458348658.20240904_215707.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021833650551024180352
• Upwork Job ID: 1833650551024180352
• Last Price Increase: 2024-09-10
• Automatic offers:
• jaydamani | Contributor | 103944838

Issue Owner

Current Issue Owner: @Pujan92

[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.

[IuliiaHerets]

We think that this bug might be related to #wave-control

[IuliiaHerets]

@strepanier03 FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[NJ-2020]

Proposal

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

Search filters - App shows not here page when category with emoji is used in search filters

What is the root cause of that problem?

Inside the searchParser regex, we do not include for emojis

App/src/libs/SearchParser/searchParser.js

Line 208 in 8a35256

var peg$r2 = /^[A-Za-z0-9_@.\/#&+\-\\',;]/;

App/src/libs/SearchParser/searchParser.js

Line 240 in 8a35256

var peg$e29 = peg$classExpectation([["A", "Z"], ["a", "z"], ["0", "9"], "_", "@", ".", "/", "#", "&", "+", "-", "\\", "'", ",", ";"], false, false);

So the regex match return value of null instead of this:

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

We can include the emojis regex by adding this

\u00a9\u00ae\u2000-\u3300\ud83c\ud000-\udfff\ud83d\ud000-\udfff\ud83e\ud000-\udfff

So it will be:

var peg$r2 = /^[A-Za-z0-9_@.\/#&+\-\\',;\u00a9\u00ae\u2000-\u3300\ud83c\ud000-\udfff\ud83d\ud000-\udfff\ud83e\ud000-\udfff]/;
....
var peg$e29 = peg$classExpectation([["A", "Z"], ["a", "z"], ["0", "9"], "_", "@", ".", "/", "#", "&", "+", "-", "\\", "'", ",", ";", "\u00a9","\u00ae", ["\u2000", "\u3300"], ["\ud83c", "\udfff"], ["\ud83d", "\udfff"], ["\ud83e", "\udfff"]], false, false);

Result

Screen.Recording.2024-09-05.at.02.44.31.mov

What alternative solutions did you explore? (Optional)

[jaydamani]

Edited by proposal-police: This proposal was edited at 2024-09-05 11:13:47 UTC.

Proposal

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

search filter does not work when category contains emoji

What is the root cause of that problem?

Based on current grammar from SearchParser.peggy, filters need to be alphanumeric (with some extra special symbols), non alphanumeric strings need to be wrapped around quotes so, category:test😃 is invalid but category:"test😃" is valid.

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

Similar thing can happen for space but for that, the quotes are added to query string by SearchUtils.sanitizeString so, we need to update SearchUtils.sanitizeString to add quotes whenever the string contains non alphanumeric character by checking that it matches /[^A-Za-z0-9_@./#&+\-\\',;]/

What alternative solutions did you explore? (Optional)

Update definition of alphanumeric to include emojis. It would look something like [A-Za-z0-9_@./#&+\-\\',;\u00a9\u00ae].

[jaydamani]

Updated proposal

• added a better solution

[melvin-bot]

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

[strepanier03]

Hmmm, I'm finding I can't create a category with an emoji 🤔