[$500] IOU - A disabled category in IOU does not deselect when you click on it

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: 1.4.35-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4257599
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Preconditions:
Configure the OldDot administrator account, include a maximum of 7 categories and invite the employee to the policy https://sites.google.com/applausemail.com/applause-expensifyproject/wiki-guides/newdot-categories?authuser=0
Steps:

Open https://staging.new.expensify.com/
Log in with the account of the employee added to the policy
Navigate to the group policy chat room
Create a manual request with any category and send it to the WS room
Open https://staging.expensify.com/
Under the administrator account, disable the category from step 4
In NewDot, under the employee's account, go to IOU details
Click on the category field
Click on the selected category with a green check mark

Expected Result:

When you click on a disabled category, it should deselect itself

Actual Result:

A disabled category in IOU does not deselect when you click on it

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6363552_1706788366027.Recording__1245.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01faafade61edc83ca
Upwork Job ID: 1753056687790592000
Last Price Increase: 2024-02-01
Automatic offers:

DylanDylann | Reviewer | 28142211
tienifr | Contributor | 28142212

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

@DylanDylann

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

@laurenreidexpensify

Triggered auto assignment to @laurenreidexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

@greg-schroeder

We think that this bug might be related to #wave6
CC @greg-schroeder

Proposal

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

A disabled category in IOU does not deselect when you click on it

What is the root cause of that problem?

When the number of categories is small, this block will run, and we'll be getting the category option tree based on the enabledAndSelectedCategories, but in enabledAndSelectedCategories, the selected category currently has enabled false, because it was disabled in Admin side, so it shows as disabled in the list.

If there're a lot of categories (equal or more than CATEGORY_LIST_THRESHOLD), this issue won't happen because in that case we already set the enabled: true for the selected category, regardless of its enabled status, as can be seen here.

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

When constructing the enabledAndSelectedCategories list here, push the selected categories in, all with enabled: true first, then push the remaining enabled categories. This is the same as we're already doing for list of a lot of categories (equal or more than CATEGORY_LIST_THRESHOLD). Also a bonus is that the selected category now will come as the first item in the list, consistent with the a-lot-of-categories UX.

const enabledAndSelectedCategories = [...selectedOptions, ...sortedCategories.filter((category) => category.enabled && !selectedOptionNames.includes(category.name))];

What alternative solutions did you explore? (Optional)

If instead we want to keep the ordering of the selected category amongst the categories as currently, we can look for the selected category in the current enabledAndSelectedCategories and set its enabled to true.

Another approach is:
Pass an array of selected categories as a 3rd param of getCategoryOptionTree, and when checking isDisabled, make sure that category is not currently selected before setting isDisabled as true.

In here we should apply similar logic as well.

Not related to this issue but in this line if both parent and child are categories, like Advertising and Advertising: Social Media: Facebook, the Advertising seems to be disabled incorrectly. We might want to check and fix it separately.

Proposal updated to add example code change.

@tienifr

The main solution in @tienifr's proposal looks good to me
🎀 👀 🎀 C+ reviewed

This caused regression. Restored this bug back.

@tienifr

@tienifr could you please raise a follow-up? There's a good suggested fix here in the linked issue

Sure.

@DylanDylann

@DylanDylann Regression fix PR is ready for review #37127.

@laurenreidexpensify

@laurenreidexpensify Please help to move forward with this issue, the PR is deployed to production and there are no regression as confirmed here

@laurenreidexpensify

@laurenreidexpensify Please help move forward this issue or add Hold for payment label.

@tienifr

Payment Summary:

Contributor $500 paid in Upwork @tienifr
C+ $500 paid in Upwork @DylanDylann

@DylanDylann

@DylanDylann pls add checklist and regression step suggestions thank you

I'm not sure we need this very specific regression test to be honest. If none already exist maybe we could create a generic one to test the list component with a disabled item to cover many cases

@DylanDylann

@DylanDylann @Julesssss do you have a suggestion for how that could look? Just tryna visualise what the many cases could be. Thanks!

I found one here. So no need for any new cases

Navigation Menu

Repository navigation

[$500] IOU - A disabled category in IOU does not deselect when you click on it #35553

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

12 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[$500] IOU - A disabled category in IOU does not deselect when you click on it #35553

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Feb 1, 2024

melvin-bot commented on Feb 1, 2024

melvin-bot commented on Feb 1, 2024

lanitochka17 commented on Feb 1, 2024

tienifr commented on Feb 1, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

tienifr commented on Feb 1, 2024

DylanDylann commented on Feb 2, 2024

12 remaining items

aimane-chnaif commented on Feb 21, 2024

Julesssss commented on Feb 21, 2024

tienifr commented on Feb 23, 2024

tienifr commented on Feb 23, 2024

DylanDylann commented on Feb 28, 2024

tienifr commented on Mar 1, 2024

laurenreidexpensify commented on Mar 4, 2024

laurenreidexpensify commented on Mar 4, 2024

DylanDylann commented on Mar 4, 2024

Julesssss commented on Mar 4, 2024

laurenreidexpensify commented on Mar 6, 2024

Julesssss commented on Mar 6, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions