[HOLD] Categories - Category moves to the bottom after editing the name

[nlemma]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.1.46-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Workspace Settings

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > Categories.
3. Click Advertising.
4. Edit the name to Advertisement and save it.

Expected Result:

The category will reorder alphabetically after editing the name.

Actual Result:

The category moves to the bottom of the list after editing the name.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6832800_1747375467273.20250516_140201.mp4

View all open jobs on GitHub

[melvin-bot]

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

[nkdengineer]

Proposal

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

Category moves to the bottom after editing the name

What is the root cause of that problem?

When the search value isn't change, we set the result as the filtered without sorting.

App/src/hooks/useSearchResults.ts

Lines 20 to 24 in 9e0ae4f

	if (prevInputValueRef.current === inputValue) {
	setResult(filtered);
	return;
	}
	prevInputValueRef.current = inputValue;

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

We should short the filter here

if (prevInputValueRef.current === inputValue) {
    setResult(sortData(filtered));
    return;
}

App/src/hooks/useSearchResults.ts

Lines 20 to 24 in 9e0ae4f

	if (prevInputValueRef.current === inputValue) {
	setResult(filtered);
	return;
	}
	prevInputValueRef.current = inputValue;

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

We can test useSearchResults and verify the result is correct when the list value is changed and the search value isn't changed.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[twilight2294]

Regression from:

• Fix: add search bar to lists with items above 15 #60488

@daledah @thesahindia

[daledah]

I've included a fix in #61656

[miljakljajic]

Let's hold this until we're sure it's resolved by #61656 - thanks @daledah

[miljakljajic]

Holding as per ^

[aadil42]

Proposal

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

After editing the Category it moves to the bottom because the category list is not being sorted after editing.

What is the root cause of that problem?

When the WorkspaceCategoriesPage is re-rendred after we edit the category, we are getting the new categories here in WorkspaceCategoriesPage

src/pages/workspace/categories/WorkspaceCategoriesPage

    const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyId}`, {canBeMissing: true});

Since we have new policyCategories this useMemo's callback is being called here we're not sorting the categories. We should sort the categories in the useMemo's callback. Not where @nkdengineer is suggesting. Because useSearchResults custom-hook should be used only for filtering the search results and then sorting them. Not when we are rendering new category list with potential edited category value. I have just started making proposals and just getting into the codebase so, @nkdengineer, feel free to correct me brother.

src/pages/workspace/categories/WorkspaceCategoriesPage

    const categoryList = useMemo<PolicyOption[]>(() => {
        const categories = Object.values(policyCategories ?? {});
        return categories.reduce<PolicyOption[]>((acc, value) => {
            const isDisabled = value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

            if (!isOffline && isDisabled) {
                return acc;

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

We can simply sort the categories like so in the useMemo's callback.

 const categoryList = useMemo<PolicyOption[]>(() => {
        const categories = Object.values(policyCategories ?? {});
        return sortCategories(categories.reduce<PolicyOption[]>((acc, value) => {
            const isDisabled = value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

            if (!isOffline && isDisabled) {
                return acc;
            }

            acc.push({
                text: value.name,
                keyForList: value.name,
                isSelected: selectedCategories.includes(value.name) && canSelectMultiple,
                isDisabled,
                pendingAction: value.pendingAction,
                errors: value.errors ?? undefined,
                rightElement: (
                    <Switch
                        isOn={value.enabled}
                        disabled={isDisabled}
                        accessibilityLabel={translate('workspace.categories.enableCategory')}
                        onToggle={(newValue: boolean) => updateWorkspaceRequiresCategory(newValue, value.name)}
                    />
                ),
            });

            return acc;
        }, []));
    }, [policyCategories, isOffline, selectedCategories, canSelectMultiple, translate, updateWorkspaceRequiresCategory]);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

We can check if the filteredCategoryList categories are sorted when rendering.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Here we're sort of mixing filtering search result with sorting.
We can creat a new custom hook that only takes care of sorting.

We can first filter out by using useSearchResults like so:

    const [inputValue, setInputValue, filteredCategoryList] = useSearchResults(categoryList, filterCategory, sortCategories);

then we can just sort it maybe like so:

    const [inputValue, setInputValue, sortedCategoryList] = useSortedResult(filteredCategoryList, sortCategories);

then we can use sortedCategoryList instead of filteredCategoryList
when passing it as a prop here:

src/pages/workspace/categories/WorkspaceCategoriesPage

 <SelectionListWithModal
                            canSelectMultiple={canSelectMultiple}
                            turnOnSelectionModeOnLongPress={isSmallScreenWidth}
                            onTurnOnSelectionMode={(item) => item && toggleCategory(item)}
                            sections={[{data: filteredCategoryList, isDisabled: false}]}
                            shouldUseDefaultRightHandSideCheckmark={false}
                            selectedItemKeys={selectedCateg

[aadil42]

@nlemma, Also when digging for the bug I found we're sorting results in a weird way.
whenever we have a lowercase string for a category it goes to the bottom. Is it suppose to be like that? Below is the video after I implemented my changes it works for capitalized words but not when the string is all lowercase. This is I think happening because of the way we're sorting with lodash. I'm not sure if it's a bug or a feature. Thank you.

Screen.Recording.2025-05-20.at.6.mp4