[$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: @

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

[truph01]

@MonilBhavsar Please take a look at my comment when you have a chance. Thanks

[jliexpensify]

Bumping @MonilBhavsar for a review.

[jliexpensify]

Have DM-ed Monil

[MonilBhavsar]

Sorry, it slipped through cracks as it issue owner is not me

Okay, I just checked and issue still persists, so we should fix it

Since fixing that bug will expand the scope of the issue and require additional testing, I believe we should consider increasing the issue price if we still want to fix that bug, or we can create a new separate issue.

Thanks for clarifying! It's fine to descope this bug and work on it a new issue 👍

Going to hire @truph01 now since their proposal is closest.
Let's split the bounty 80-20 between @truph01 and @ChavdaSachin for helping tweaking the proposal and scope of the fix,

cc @jliexpensify

[melvin-bot]

📣 @truph01 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[ChavdaSachin]

Thanks 👍

[jliexpensify]

Thanks Monil - so here's a tentative Payment Summary

• C: @truph01 $200
• C: @ChavdaSachin $50
• C+: @rushatgabhane $250 (to be paid via N.D requests)

NEW UPWORKS JOB

[melvin-bot]

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

[jliexpensify]

Damn, I thought that would auto-create a new job (the old one is expired). Will manually create one then.

[jliexpensify]

@truph01 what's your Upworks profile? Could you add it (or your name) to your GH profile? Thanks.

[truph01]

@jliexpensify I accepted this automatic offer. Correct amount ($200) could be paid out on that offer later.

@truph01 what's your Upworks profile? Could you add it (or your name) to your GH profile? Thanks.

Sure, I added my profile link to GH profile.

[jliexpensify]

@truph01 thanks! Upworks does this annoying thing where after a month, it closes jobs and we can't pay out on them. So I had to create a new job and hire you.

[truph01]

PR is ready @rushatgabhane