Expense Rules - New category added is not arranged in alphabetical order in Category list

[jponikarchuk]

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.3.7-1
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #79659
Email or phone of affected tester (no customers): iondosijsoijsniosj@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.1 / Chrome
App Component: Other

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > Categories.
3. Add a category named "A".
4. Go to https://staging.new.expensify.com/settings/rules
5. Click New rule.
6. Click Category.
7. Scroll down to the bottom.

Expected Result:

New category "A" added should be arranged in alphabetical order.

Actual Result:

New category "A" added is not arranged in alphabetical order. It is listed at the end of category list.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

1.mp4

View all open jobs on GitHub

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #79659

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[melvin-bot]

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

[github-actions]

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

[OSBotify]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #79659 - "Expense rules phase 2" by @situchan (High confidence)
Related Issues: None

Recommendation: ROLL FORWARD

The fix is straightforward - add alphabetical sorting to the category, tag, and tax rate lists. A revert would be problematic as this PR introduced the entire expense rules phase 2 feature (create, edit, delete rules), and reverting would remove all this functionality.

Labels: Keeping DeployBlockerCash (App deploy is blocked by this frontend bug)

📋 Detailed Analysis

Evidence

PR #79659 introduced the expense rules phase 2 feature, including several new field selection pages:

• AddCategoryPage.tsx
• AddTagPage.tsx
• AddTaxRatePage.tsx

The issue specifically reports that when selecting a category in the expense rules flow, newly added categories appear at the end of the list instead of being sorted alphabetically.

Verification

I examined the affected files and confirmed the root cause:

File: /home/runner/work/App/App/src/pages/settings/Rules/Fields/AddCategoryPage.tsx
Lines 49-54:

return Array.from(uniqueCategoryNames)
    .filter(Boolean)
    .map((categoryName) => {
        const decodedCategoryName = getDecodedCategoryName(categoryName);
        return {name: decodedCategoryName, value: categoryName};
    });

Problem: The array is created from a Set, filtered, and mapped, but never sorted. Categories are displayed in insertion order, not alphabetical order.

Similar issues exist in:

• AddTagPage.tsx (line 43) - tags not sorted
• AddTaxRatePage.tsx (lines 28-31) - tax rates not sorted

The SearchSingleSelectionPicker component (which displays these lists) does not perform any sorting on the items it receives - it displays them in the order provided.

Root Cause

When categories are collected from multiple policies into a Set and converted to an array, no sorting is applied. The codebase uses localeCompare for text sorting elsewhere (as seen in NewReportWorkspaceSelectionPage.tsx, PolicyDistanceRatesPage.tsx, etc.), but this pattern was not followed in the expense rules field pages.

Fix Required

Add alphabetical sorting after the .filter(Boolean) call in all three files:

• Use the localeCompare function from useLocalize() hook
• Sort by the decoded category/tag/tax name for proper alphabetical ordering

Example fix for AddCategoryPage.tsx:

const {localeCompare} = useLocalize();
// ...
return Array.from(uniqueCategoryNames)
    .filter(Boolean)
    .map((categoryName) => {
        const decodedCategoryName = getDecodedCategoryName(categoryName);
        return {name: decodedCategoryName, value: categoryName};
    })
    .sort((a, b) => localeCompare(a.name, b.name));

[situchan]

Not blocker