[Due for payment 2025-08-22] [$250] Workspace - Category and Tag list get deselected when editing name of the list item

[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: v9.1.88-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: https://test-management.browserstack.com/projects/2148171/folder/12015316/test-cases/39317765
Email or phone of affected tester (no customers): testpayment935@gmail.com
Issue reported by: Applause Internal Team
Device used: Windows 10 /Chrome
App Component: Workspace Settings

Action Performed:

1. Navigate to https://staging.new.expensify.com.
2. Create a new Workspace > More Features >enable both Tag and Tax.
3. Create several Tax and Tag entries.
4. Open the Tax list and select all items.
5. Navigate to one of the selected Tax items and change its name.
6. Note that edited Tax item remains selected in the background list after the edit.
7. Open the Category or Tag list.
8. Select all items in the list and navigate to one of the selected Category/Tag items.
9. Edit the Category/Tag name.

Expected Result:

When Category or Tag name is edited, the item remains selected—matching the behavior seen in the Tax list.

Actual Result:

Unlike the Tax list, when editing a Category or Tag item, it gets deselected from the list.

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

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021951327520280656052
• Upwork Job ID: 1951327520280656052
• Last Price Increase: 2025-08-01
• Automatic offers:
• huult | Contributor | 108309656

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

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

[drminh2807]

Proposal

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

Workspace - Category and Tag list get deselected when editing name of the list item

What is the root cause of that problem?

useFilteredSelection use old key to check filter selection. So while the policyCategories use new name of category for key. the filter can't find the options[key] correctly

App/src/hooks/useFilteredSelection.ts

Line 14 in a23ee2d

useEffect(() => setSelectedOptions((prevOptions) => prevOptions.filter((key) => filter(options?.[key]))), [options, filter]);

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 94 in a23ee2d

const [selectedCategories, setSelectedCategories] = useFilteredSelection(policyCategories, filterCategories);

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

We should add selectedCategories again when the name (as key) is changed

    useEffect(() => {
        Object.keys(policyCategories ?? {}).forEach((categoryName) => {
            const previousCategoryName = policyCategories?.[categoryName].previousCategoryName;
            if (previousCategoryName && selectedCategories.includes(previousCategoryName)) {
                setSelectedCategories((prev) => [...prev.filter((category) => category !== previousCategoryName), categoryName]);
            }
        });
    }, [policyCategories, selectedCategories, setSelectedCategories]);

Do the same thing with Tags page

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

N/A

What alternative solutions did you explore? (Optional)

    const getPreviousCategoryKey = useCallback((category: PolicyCategory | undefined) => category?.previousCategoryName, []);

    const [selectedCategories, setSelectedCategories] = useFilteredSelection(policyCategories, filterCategories, getPreviousCategoryKey);
.
.
.
function useFilteredSelection<TKey extends string | number, TValue>(
    options: Record<TKey, TValue> | undefined,
    filter: (option: TValue | undefined) => boolean,
    getPreviousKey?: (option: TValue | undefined) => TKey | undefined,
) {
    const [selectedOptions, setSelectedOptions] = useState<TKey[]>([]);

    // Filter selected options based on the filter function
    useEffect(() => setSelectedOptions((prevOptions) => prevOptions.filter((key) => filter(options?.[key]))), [options, filter]);

    // Handle key changes when options have previous keys
    useEffect(() => {
        if (!getPreviousKey || !options) {
            return;
        }

        Object.keys(options).forEach((currentKey) => {
            const option = options[currentKey as TKey];
            const previousKey = getPreviousKey(option);

            if (previousKey && selectedOptions.includes(previousKey)) {
                setSelectedOptions((prev) => [...prev.filter((key) => key !== previousKey), currentKey as TKey]);
            }
        });
    }, [options, selectedOptions, getPreviousKey]);

    return [selectedOptions, setSelectedOptions] as const;
}

[Eskalifer1]

Proposal

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

Workspace - Category and Tag list get deselected when editing name of the list item

What is the root cause of that problem?

Currently, each unique value in the category object is a name, so when we change the name, there is no new value in the array and therefore the value is no longer displayed as selected:

App/src/hooks/useFilteredSelection.ts

Lines 11 to 17 in 0890f45

	function useFilteredSelection<TKey extends string | number, TValue>(options: Record<TKey, TValue> | undefined, filter: (option: TValue | undefined) => boolean) {
	const [selectedOptions, setSelectedOptions] = useState<TKey[]>([]);
	useEffect(() => setSelectedOptions((prevOptions) => prevOptions.filter((key) => filter(options?.[key]))), [options, filter]);
	return [selectedOptions, setSelectedOptions] as const;
	}

But the Taxes page does not work with the name, but with the id of objects

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

I think that in this case, it would be best for the backend to return a unique value (id, for example) for each field, which we cannot change from the frontend. Other solutions would be just a workaround, not a real solve of the problem.

If the backend returns a unique field for each object, then it will be possible to determine the selected categories not by name, but by this new field (id, for example), and then we will get rid of this, and it will be the same approach that we use for taxes.

The same will need to be done with the Tags page.

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

N/A

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.

[melvin-bot]

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

[melvin-bot]

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

[Nakaddu-Charity]

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

The problem is that when a user edits the name of a Category or Tag within a Workspace, the edited item (and potentially other selected items) becomes deselected from the list. This behavior is inconsistent with how Tax items are handled, where the item correctly remains selected after its name is edited.

What is the root cause of that problem?

As identified in the existing comments, the root cause appears to stem from the useFilteredSelection hook. When a Category or Tag name is edited, its internal identifier (often derived from the name itself) changes. The useFilteredSelection hook then attempts to re-evaluate selected options using the old identifier, causing it to incorrectly filter out or "deselect" the item because it can no longer find it under its previous key. The useEffect responsible for managing selectedOptions needs to be robust to these key changes.

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

To resolve this, we need to modify the logic within the useFilteredSelection hook or its direct consumers (likely WorkspaceCategoriesPage.tsx and WorkspaceTagsPage.tsx) to correctly manage selections when an item's name (and thus its key) is updated.

My proposed approach is to:

1. Detect Name/Key Change: Ensure the system accurately identifies when a selected item's key has changed due to a name edit.
2. Re-evaluate and Persist Selection: Instead of simply filtering out the old key, the selection logic should:
   • If a stable, persistent ID exists for each item (independent of its name), leverage this ID to maintain selection across name changes.
   • If the name is the primary key, the selectedOptions state within the useEffect needs to be updated to reflect the new key for the renamed item, ensuring it remains marked as selected. This would involve a re-mapping or re-computation of the selected set after the name update.

This will ensure that the item remains selected after the edit, consistent with the expected behavior seen with Tax items.

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

We should add automated tests covering the following scenarios:

1. Single Item Edit & Persistence:
   • Create a workspace with Categories/Tags enabled.
   • Add a new Category/Tag (e.g., "OldTag").
   • Select "OldTag" in the list.
   • Edit the name of "OldTag" to "NewTag".
   • Verify: "NewTag" remains selected in the list after the edit.
2. Multiple Items Selected & Single Item Edit:
   • Create a workspace with Categories/Tags enabled.
   • Add multiple Categories/Tags (e.g., "Tag A", "Tag B", "Tag C").
   • Select "Tag A" and "Tag C".
   • Edit "Tag A" to "Renamed Tag A".
   • Verify: "Renamed Tag A" remains selected, and "Tag C" also remains selected.
3. Platform Consistency:
   • Ensure these tests are executed across all relevant platforms (Web, iOS, Android) to confirm consistent behavior.

What alternative solutions did you explore? (Optional)

At this time, refining the selection logic within the useFilteredSelection hook or its direct consumers to account for key changes during edits appears to be the most direct and efficient solution. I will confirm this after a deeper dive into the codebase upon being hired. Nakaddu Charity

[melvin-bot]

📣 @Nakaddu-Charity! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Nakaddu-Charity]

Contributor details
Your Expensify account email: nakaddu30@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~010bd697b2134c5af8