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

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

[jliexpensify]

Bumping @rushatgabhane for the checklist.

Payment summary

[truph01]

The PR to address this issue was reverted via PR #54583 due to concerns about it causing the following issue: "If we preserve selections and delete a category from the category settings page, the selection counter in the header does not update." However, as stated in this comment, this is not a regression introduced by our PR but rather a known issue that our changes made more noticeable. I had previously flagged this issue internally and requested a fix in this comment.

What should be the next step here, considering I am already working on another PR #54576 to resolve the bug: "If we preserve selections and delete a category from the category settings page, the selection counter in the header does not update."?

@jliexpensify @MonilBhavsar

[jliexpensify]

I'm actually OOO from tomorrow until next Tuesday (AEST) so payment will likely be delayed - is this also part of a regression though?

[truph01]

is this also part of a regression though?

No, we plan to address that in a separate issue. You can find more details here.

[jliexpensify]

Ok no worries, in that case - @rushatgabhane can you complete the checklist, and I can pay later today?

[jliexpensify]

@truph01 and @ChavdaSachin - really annoying, Upworks CLOSED the new job I created

Please accept this 3RD job (so ridiculous!!!) - https://www.upwork.com/jobs/~021874745812108371854

[jliexpensify]

Payment Summary (again)

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

https://www.upwork.com/jobs/~021874745812108371854

[truph01]

@jliexpensify Please check my comment above:

The PR to address this issue was reverted via #54583

[jliexpensify]

Wait, sorry - I'm a little confused: so I'm not paying out this job then?

If I'm understanding your comment correctly, #54576 will resolve this bug, right?

If that's the case - then I assume payment will be handled in that issue for you? But I'm not sure about @rushatgabhane and @ChavdaSachin's payments - should there be a partial compensation here?

[truph01]

Allow me to explain my comment:

There are two issues:

1. Issue #49322: When selecting categories, the selected categories reset if we click outside the checkbox.
2. Issue #54485: Taxes - '1 selected' dropdown is not dismissed after the selected rate is deleted.

The PR for the first issue was reverted because it made the second issue more noticeable. Meanwhile, I am working on another PR to fix the 2nd issue.

@jliexpensify What should be the next step here?

My suggestion is to recreate the PR to address the first issue (which was reverted) while continuing work on the PR to resolve the 2nd issue.

[jliexpensify]

Oh, I got it; thanks for clarifying and explaining further! I'm not an Engineer so I think @MonilBhavsar or @rushatgabhane would be best positioned to work out the next steps (although your suggestion makes sense to me).

In the meantime, I think we will need to pause on payment for this issue until we work out next steps?

[truph01]

In the meantime, I think we will need to pause on payment for this issue until we work out next steps?

Yes. I agree

[melvin-bot]

@rushatgabhane, @jliexpensify, @MonilBhavsar, @truph01 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[jliexpensify]

Not overdue - bump @MonilBhavsar and @rushatgabhane on what to do next.

[MonilBhavsar]

My suggestion is to recreate the PR to address the first issue (which was reverted) while continuing work on the PR to resolve the 2nd issue.

Yes, let's do it 👍

[MonilBhavsar]

Adjusted labels and title accordingly

[truph01]

@rushatgabhane PR is ready

[Christinadobrzyn]

monitoring PR - #54998