[HOLD for payment 2024-09-27][$125] [Search v2.1] - 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:

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

Screenshots/Videos

Bug6591710_1725368473798.20240903_205902.mp4

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]

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

App/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCategoryPage.tsx

Line 34 in 2d1f8cd

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

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(),

App/src/components/Search/SearchMultipleSelectionPicker.tsx

Lines 88 to 90 in 2d1f8cd

	const handleConfirmSelection = useCallback(() => {
	onSaveSelection(selectedItems.map((item) => item.value).flat());
	Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);

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

App/src/pages/Search/AdvancedSearchFilters.tsx

Lines 175 to 180 in c885f96

	if (
	(fieldName === CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY || fieldName === CONST.SEARCH.SYNTAX_FILTER_KEYS.CURRENCY || fieldName === CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG) &&
	filters[fieldName]
	) {
	const filterArray = filters[fieldName] ?? [];
	return filterArray.join(', ');

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.

App/src/pages/Search/AdvancedSearchFilters.tsx

Line 180 in c885f96

return filterArray.join(', ');

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

This change will also sort the currency and tag fields.

[melvin-bot]

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

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