[$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 contributors@expensify.com 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
   • [x] MacOS: Chrome / Safari
   • [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/c70804b4-fad5-4664-9503-65335a48dd4a

https://github.com/user-attachments/assets/28f50025-55a1-4324-a1c6-5318a074ad3f

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

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @rushatgabhane

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

[cretadn22]

Edited by proposal-police: This proposal was edited at 2024-09-17 01:55:21 UTC.

Proposal

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

when selecting categories, the selected categories get reset if we click outside the checkbox

What is the root cause of that problem?

We reset all selected categories when isFocus is changed https://github.com/Expensify/App/blob/28e9fa9f0ae0bac70d6b3e2161bf00712aeffefa/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L89-L94

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

Let's remove this code

https://github.com/Expensify/App/blob/28e9fa9f0ae0bac70d6b3e2161bf00712aeffefa/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L89-L94

We can reset the selected categories only when the page unmounts by using the cleanup function in useEffect, it would be ideal.

What alternative solutions did you explore? (Optional)

[rushatgabhane]

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

[melvin-bot[bot]]

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

[melvin-bot[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]

Still in discussion but this is what we've arrived on so far -

Expected behavior 1:

Even if you open the details of a category, it shouldn't deselect the categories. This is actually the expectation I think I would have. Basically the same exact behavior as Gmail

Expected behavior 2:

When you're in selection mode on small screens, you should be able to tap anywhere to select the category.

[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: https://github.com/Expensify/App/blob/28e9fa9f0ae0bac70d6b3e2161bf00712aeffefa/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L90-L93 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: https://github.com/Expensify/App/blob/28e9fa9f0ae0bac70d6b3e2161bf00712aeffefa/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L89-L94

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:

https://github.com/Expensify/App/blob/28e9fa9f0ae0bac70d6b3e2161bf00712aeffefa/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L136

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: https://github.com/Expensify/App/blob/28e9fa9f0ae0bac70d6b3e2161bf00712aeffefa/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L89-L94

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

https://github.com/user-attachments/assets/ecdeac88-8b8c-4da5-8349-d1418e997c52

https://github.com/user-attachments/assets/ea3e661f-685b-4743-bd38-9dfa29bfa1e0

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

[ChavdaSachin]

Proposal

updated added solution for expectation 2.

[github-actions[bot]]

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

[ChavdaSachin]

Proposal

updated re-formatted to align with template

[github-actions[bot]]

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

[ChavdaSachin]

Edited by proposal-police: This proposal was edited at 2023-10-27T17:52:00Z.

Proposal

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

• when selecting categories, the selected categories get reset if we click outside the checkbox

What is the root cause of that problem?

• we reset selections every time category page goes out of focus here https://github.com/Expensify/App/blob/539327dc2d0585624e5e0b990ca0d79f4e66e81b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L89-L94

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

• Create a new state to hold information whether selection should be preserved or not

  const [preserveSelection, setPreserveSelection] = useState(false);

• set preserveSelection to true when navigating to certain pages for which we want to preserve selection. check condition for !shouldUseNarrowLayout if we want selections to be preserved only for desktop devices.

  const navigateToCategorySettings = (category: PolicyOption) => {
      if(!shouldUseNarrowLayout) {
          setPreserveSelection(true);
      }
      if (backTo) {
          Navigation.navigate(ROUTES.SETTINGS_CATEGORY_SETTINGS.getRoute(policyId, category.keyForList, backTo));
          return;
      }
      Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(policyId, category.keyForList));
  };

  https://github.com/Expensify/App/blob/539327dc2d0585624e5e0b990ca0d79f4e66e81b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L136-L142

• Modify useEffect .... to preserve selection when preserveSelection === true

  useEffect(() => {
      if (isFocused || preserveSelection) {
          setPreserveSelection(false);
          return;
      }
      setSelectedCategories({});
  }, [isFocused]);

  https://github.com/Expensify/App/blob/539327dc2d0585624e5e0b990ca0d79f4e66e81b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L89-L94

  • And for Mobile check for selection mode while passing onSelectRaw prop call toggleCategory(item) if selectionMode?.isEnabled else call navigateToCategorySettings(item)

                     onSelectRow={(item) => {selectionMode?.isEnabled ? toggleCategory(item): navigateToCategorySettings(item)}}

    https://github.com/Expensify/App/blob/28e9fa9f0ae0bac70d6b3e2161bf00712aeffefa/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L398

    Implement similar logic for any other RHP page if we want to preserve selection upon visiting that RHP page in particular similar approach should be applied on other workspace pages (Members, Distance rates, Tags, Report Fields, Taxes)

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.

[ChavdaSachin]

Don't know why my proposal was getting rejected by bot, so re wrote the proposal.

[rushatgabhane]

cool, let's assign @ChavdaSachin https://github.com/Expensify/App/issues/49322#issuecomment-2354681501

[ChavdaSachin]

Thank you @rushatgabhane. A question - should I implement this for other pages (Members, Distance rates, Tags, Report Fields, Taxes) as well ?

[truph01]

What do you think about my thought @rushatgabhane @MonilBhavsar:

https://github.com/Expensify/App/blob/28e9fa9f0ae0bac70d6b3e2161bf00712aeffefa/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L89-L94

I suggest removing above 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 and it appears in a lot of other position in our app: when you select options on screen A, navigate to B, and then return to A, A's state should naturally be preserved.

[rushatgabhane]

@truph01 it was intentionally not preserved for selection of categories, members etc

[truph01]

@rushatgabhane From the workspace category page, we can open the category detail page by two cases:

1. Click on the category (the case in this issue).

2. Using deeplink.

Although we want to clear the selected options when navigating to another page, the solution you've chosen only resolves the issue in case 1, where preserveSelection is set to true. In case 2, the issue remains unresolved.

[rushatgabhane]

can you please elaborate the deeplink case? maybe steps for it

[truph01]

it was intentionally not preserved for selection of categories, members etc

I think this is because we assume the behavior "you selected options on screen A, navigated to screen B, and returned to A, the selected options were not cleared" is a bug and fixed all the behavior in others pages as you mentioned workspace member pages, workspace tags pages in this PR.

[rushatgabhane]

Made intentional in PR - https://github.com/Expensify/App/pull/40136

[truph01]

can you please elaborate the deeplink case? maybe steps for it

• I tried to implement that solution, but it did not fix the main bug in this issue. Have you tested it?

• Beside deeplink, another case to prove that the selected solution does not work is below:

1. Enable categories on a controlled workspace
2. Click More features > Categories > Click check box to select all categories
3. Click on "Three dot" at the top right, then "Import spreadsheet".
4. Oberserve that the bug does not fix

https://github.com/user-attachments/assets/d776daad-dd3d-46ad-96f8-f474357181aa

[truph01]

@rushatgabhane I updated my comment to add another test case.

[ChavdaSachin]

Here's my test branch for your convenience.

[ChavdaSachin]

Proposal

updated added an optional fix.

[ChavdaSachin]

if design team wants similar behavior for the import categories page Just add.

            setPreserveSelection(true);

before this line. https://github.com/Expensify/App/blob/28e9fa9f0ae0bac70d6b3e2161bf00712aeffefa/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L308

[truph01]

@MonilBhavsar What do you think about my thought?

[MonilBhavsar]

set preserveSelection to true when navigating to certain pages for which we want to preserve selection.

@ChavdaSachin have we discussed for which pages we want to preserve selection and for which changes we don't want to. I feel like we should just have same behavior for all workflows to keep it simple

[MonilBhavsar]

A's state should naturally be preserved.

@truph01 by "naturally preserved" you mean keep the selection or initialize it by removing all the selections?

[ChavdaSachin]

Okay @MonilBhavsar so just for the sake of additional clarity,

1. On web we should preserve selections when clicking raw and coming back.
2. Similarly it should be preserved when opening and closing import categories page or don't we?.
3. on mobile - when selectionMode is enabled - clicking a raw should toggle category rather then navigating t category page.

Quick question: In addition to workspaceCategories page, Imo we should implement same behavior for following workspace pages

1. Members
2. Distance rates
3. Tags
4. Report Fields
5. Taxes

Right ?

[ChavdaSachin]

And here in this PR it is made clear that we want to clear selection when navigating to other workspace pages. As already pointed out by @rushatgabhane https://github.com/Expensify/App/issues/49322#issuecomment-2354750241

[truph01]

by "naturally preserved" you mean keep the selection or initialize it by removing all the selections?

I mean "keep the selection"

[MonilBhavsar]

In addition to workspaceCategories page, Imo we should implement same behavior for following workspace pages

Members Distance rates Tags Report Fields Taxes Right ?

That would be great to check for all pages and ensure they have identical behavior!

And here in this https://github.com/Expensify/App/pull/40136#issue-2238369263 it is made clear that we want to clear selection when navigating to other workspace pages.

Okay, thanks for the context

I mean "keep the selection"

👍 Looks like we don't want to keep the selection, atleast when navigating from other pages

[truph01]

Looks like we don't want to keep the selection, atleast when navigating from other pages

I will update the proposal to match this requirement, please wait a minute.

[MonilBhavsar]

@rushatgabhane Looks like there are lot of changes since you last reviewed. Would you like to take a look again please

[truph01]

I updated proposal. cc @rushatgabhane

[truph01]

I updated proposal. cc @rushatgabhane

[Gajendra-Gupta]

Proposal

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

when selecting categories, the selected categories get reset if we click outside the checkbox

What is the root cause of that problem?

https://github.com/Expensify/App/blob/539327dc2d0585624e5e0b990ca0d79f4e66e81b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L93

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

Remove this line

setSelectedCategories({});

What alternative solutions did you explore? (Optional)