[$125] Search filters - Selected categories are not arranged alphabetically in Category field

[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.28-0 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 Search.
3. Click Filters.
4. Click Category.
5. Randomly select a few categories.
6. Click Save.

Expected Result:

The selected categories will be arranged alphabetically in Category field.

Actual Result:

The selected categories are not arranged alphabetically in Category field.

Workaround:

Unknown

Platforms:

• [x] Android: Native
• [x] Android: mWeb Chrome
• [x] iOS: Native
• [x] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/6324e158-ac70-4503-88f0-7212e713b8f5

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016ce9ccc4019cea35
• Upwork Job ID: 1831045716418683547
• Last Price Increase: 2024-09-03
• Automatic offers:
• shubham1206agra | Reviewer | 103872397
• Tony-MK | Contributor | 103872399

Issue Owner

Current Issue Owner: @shubham1206agra

[melvin-bot[bot]]

Triggered auto assignment to @puneetlath (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]

@puneetlath 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

[etCoderDysto]

Proposal

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

Search filters - Selected categories are not arranged alphabetically in Category field

What is the root cause of that problem?

On saving selected items, we are not sorting selected items before updating filter form with the selected items https://github.com/Expensify/App/blob/2d1f8cd1cb072f0b9c9672effa65199727553ab9/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCategoryPage.tsx#L34

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

We should sort the selected items first before updating filter form with the selected items

const onSaveSelection = useCallback((values: string[]) => SearchActions.updateAdvancedFilters({category: values.sort(localeCompare)}), [])

What alternative solutions did you explore? (Optional)

We can sort the selected items in SearchMultipleSelectionPicker, if we want to sort all fields on the filter page

onSaveSelection(
    selectedItems
           .sort((a, b) => localeCompare(a.name, b.name))
           .map((item) => item.value)
           .flat(),

https://github.com/Expensify/App/blob/2d1f8cd1cb072f0b9c9672effa65199727553ab9/src/components/Search/SearchMultipleSelectionPicker.tsx#L88-L90

[Tony-MK]

Proposal

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

Search filters - Selected categories are not arranged alphabetically in Category field

What is the root cause of that problem?

We don't sort the filterArray in the getFilterDisplayTitle function.

https://github.com/Expensify/App/blob/c885f96f66f4c552308fafb81b6251daf1fb4136/src/pages/Search/AdvancedSearchFilters.tsx#L175-L180

So, the text created from the categories will not be ordered

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

We should sort the categories in filterArray so the text will be sorted.

https://github.com/Expensify/App/blob/c885f96f66f4c552308fafb81b6251daf1fb4136/src/pages/Search/AdvancedSearchFilters.tsx#L180

return filterArray.sort(localeCompare).join(', ');

This change will also sort the currency and tag fields.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[puneetlath]

It's not really a bug, more of an improvement request. But we can go ahead and do it for $125.

[melvin-bot[bot]]

Upwork job price has been updated to $125

[shubham1206agra]

@puneetlath Do you also want to sort the currencies similarly?

[puneetlath]

Yes, I'd think we'd do it for any of the multi-select fields.

[shubham1206agra]

@Tony-MK Please update your proposal

[etCoderDysto]

@shubham1206agra can you please comment on my proposal https://github.com/Expensify/App/issues/48496#issuecomment-2327166782. My alternative solution covers sorting currency, and other fields. We can also repeat my main solution on currency pages and others.

[Tony-MK]

Proposal

Hi @shubham1206agra, I updated my proposal.

[shubham1206agra]

Let's go with @Tony-MK's proposal.

🎀👀🎀 C+ reviewed

[melvin-bot[bot]]

Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot[bot]]

📣 @shubham1206agra 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[melvin-bot[bot]]

📣 @Tony-MK 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[Tony-MK]

Hey @shubham1206agra, the PR is ready for review.

Thanks