[Due for payment 2025-02-19] [$250] when selecting categories, the selected categories get reset if we click outside the checkbox

[m-natarajan]

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.0.36-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @rushatgabhane
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1725906909191599

Action Performed:

1. Enable categories on a controlled workspace
2. Click More features > Categories > Click check box to select all categories
3. Click on any row to select individual category

Expected Result:

RHP opened for selected category and other category remain selected

Actual Result:

RHP opened for the category and all other categories are reset (Unchecked)

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Screen.Recording.2024-09-09.at.21.33.31.mov

Recording.530.mp4

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021835867544323146964
• Upwork Job ID: 1835867544323146964
• Last Price Increase: 2024-09-17
• Automatic offers:
• truph01 | Contributor | 105157836

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot]

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

[rushatgabhane]

@jliexpensify could you please assign me. I want to C+ this because I raised this issue

[melvin-bot]

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

[melvin-bot]

Current assignee @rushatgabhane is eligible for the External assigner, not assigning anyone new.

[jliexpensify]

Done, I think Design is still weighing in though?

[rushatgabhane]

I'll post an update on the expected result whenever design team has reached a decision

[rushatgabhane]

Expected result:

1. On web, make it like gmail.
   a. You can select by tapping checkbox.
   b. If you tap a row, it’ll open the category.
   c. Tapping a row should not dismiss the selected categories

2. On mobile, if you’re in selection mode you should be able to tap anywhere to select the row.

(source)

[cretadn22]

@rushatgabhane Please review the PR that introduced this bug. I believe it will provide valuable insights for defining the final expectations.

[truph01]

Edited by proposal-police: This proposal was edited at 2023-10-07T16:31:35Z.

Proposal

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

RHP opened for the category and all other categories are reset (Unchecked)

What is the root cause of that problem?

• This useEffect logic:
  

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

  Lines 90 to 93 in 28e9fa9

  	if (isFocused) {
  	return;
  	}
  	setSelectedCategories({});

  cause the issue that all the selected categories are clear when we click on any category to open its detail page.

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

• In this post, I will propose a solution that matches these requirements:

1. On web's requirements.

• Remove the logic causing this issue:
  

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

  Lines 89 to 94 in 28e9fa9

  	useEffect(() => {
  	if (isFocused) {
  	return;
  	}
  	setSelectedCategories({});
  	}, [isFocused]);

The similar logic should be removed in this, this and this.

• Then introduce a new hook. With this hook, it will not clear the selected options if user is navigated to RHN. Otherwise, clear the selected options :

import {NavigationContainerRefContext, useIsFocused} from '@react-navigation/native';
import {useContext, useEffect} from 'react';
import NAVIGATORS from '@src/NAVIGATORS';

let shouldCleanupSelectedOptions = false;

const useCleanupSelectedOptions = (setFunction: ({}: any) => void) => {
    const navigationContainerRef = useContext(NavigationContainerRefContext);
    const state = navigationContainerRef?.getState();
    const lastRoute = state.routes.at(-1);
    const isRightModalOpening = lastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR;

    const isFocused = useIsFocused();

    useEffect(() => {
        if (isFocused || isRightModalOpening) {
            return;
        }
        shouldCleanupSelectedOptions = false;
        setFunction?.({});
    }, [isFocused, setFunction, isRightModalOpening]);
};

export {useCleanupSelectedOptions};

and just need to use that hook in where we want to clean up its selected option once we visit other pages, such as: In WorkspaceCategoriesPage, we use useCleanupSelectedOptions(setSelectedCategories), in WorkspaceTagsPage we use useCleanupSelectedOptions(setSelectedTags).

2. On mobile's requirements:

• Update this logic:

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

Line 136 in 28e9fa9

const navigateToCategorySettings = (category: PolicyOption) => {

so that it will call toggleCategory(category) if isSmallScreenWidth && selectionMode?.isEnabled is true:

    const navigateToCategorySettings = (category: PolicyOption) => {
        if (isSmallScreenWidth && selectionMode?.isEnabled) {
            toggleCategory(category);
            return;
        }

What alternative solutions did you explore? (Optional)

1. On web's requirements.

• Remove the logic causing this issue:
  

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

  Lines 89 to 94 in 28e9fa9

  	useEffect(() => {
  	if (isFocused) {
  	return;
  	}
  	setSelectedCategories({});
  	}, [isFocused]);

I suggest removing that logic, as it was originally added to address an issue where: if you selected options on screen A, navigated to screen B, and returned to A, the selected options were not cleared. However, I believe this is standard behavior in terms of the navigation stack: when you select options on screen A, navigate to B, and then return to A, A's state should naturally be preserved.

[ChavdaSachin]

Results for above proposal

Screen.Recording.2024-09-17.at.10.08.17.AM.mov

Screen.Recording.2024-09-17.at.10.10.38.AM.mov

[truph01]

Updated proposal to remove redundant code changes and add an explanation.

[rushatgabhane]

Let's go forward with @truph01's proposal. it addresses all requirements

C+ reviewed 🎀 👀 🎀

[melvin-bot]

Triggered auto assignment to @MonilBhavsar, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[ChavdaSachin]

@rushatgabhane just a note @truph01's solution do not clear categories even for other cases like switching to tags page and come back, so it does not align with the expectations.
Just to be more precise on expectations

1. selections should not clear after taping raw
2. selection should be cleared upon visiting other pages like Tags, Workflow, etc... and coming back

• this is what I concluded from expectations posted by you.

[rushatgabhane]

sorry i didn't know that we should remove selected categories if we navigate away

[rushatgabhane]

@ChavdaSachin for mobile, we want the categories to select if you tap anywhere on the row when in selection mode.
please update your proposal

[ChavdaSachin]

give me a minute

[github-actions]

spb Your proposal will be dismissed because you did not follow the proposal template.

[Christinadobrzyn]

monitoring PR - #54998

[melvin-bot]

This issue has not been updated in over 15 days. @rushatgabhane, @jliexpensify, @MonilBhavsar, @truph01 eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[jliexpensify]

Still waiting

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.96-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: when selecting categories, the selected categories get reset - v2 #54998

If no regressions arise, payment will be issued on 2025-02-19. 🎊

For reference, here are some details about the assignees on this issue:

• @rushatgabhane requires payment through NewDot Manual Requests
• @truph01 requires payment automatic offer (Contributor)
• @rushatgabhane requires payment through NewDot Manual Requests

[melvin-bot]

@rushatgabhane @jliexpensify @rushatgabhane The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[rushatgabhane]

Based on the discussion here,
I'd call this a new feature and not a bug.

Regression steps:

On web / desktop

1. Enable categories on a control workspace
2. Click More features > Categories > Click check box to select all categories
3. Click on any row to select individual category
4. Verify RHP opened for selected category and other category remain selected

On mobile/mWeb

1. Click More features > Categories > Click check box to select all categories
2. Click on any row to select individual category
3. Verify that the row is selected/unselected

[jliexpensify]

@truph01 @rushatgabhane @ChavdaSachin can you all confirm this Payment Summary is correct?

[garrettmknight]

$250 approved for @rushatgabhane

[jliexpensify]

Paid and job closed, thanks everyone!

[ChavdaSachin]

@jliexpensify I am sorry but my payment is not yet released, could you check once please.

[jliexpensify]

I'm unsure how to check this, since the job is closed. I do remember paying you though and ending your contract.

Can you share screenshots of what you're seeing on your side?

[ChavdaSachin]

The contract is still active and unpaid.

[jliexpensify]

@ChavdaSachin what is the job number/URL?

Because 3 jobs were created and I am 99% sure I paid the last job - so maybe this is one of the first 2 jobs?

[ChavdaSachin]

@jliexpensify sorry for the trouble, there's something wrong my upwork it seems. We're good here.

[jliexpensify]

No worries, FYI I don't think it's your Upworks specifically - Upworks has this stupid thing where if a job doesn't get actioned or edited in a month, they close it out. This is really frustrating because some of our jobs take months to complete, so multiple iterations of the job get closed. It's confusing for everyone, this is one of the longest/worst I've seen.