[HOLD for payment 2024-01-24] [$500] Category - Selected category is not in the list when it is disabled and there is <8 categories

[lanitochka17]

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.3.86-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
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: Applause - Internal Team
Slack conversation:

Action Performed:

Precondition: There must be less than 8 categories in the workspace.

1. [Employee] Create a manual receipt with a category
2. [Admin] Go to OldDot and disable the category that is used in Step 1
3. [Employee] Go to the expense details page and click Category

Expected Result:

The selected category will appear in the list with a green tick mark

Actual Result:

The selected category is not present in the category list

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Bug6242102_1697653864127.20231018_201159.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0118e9d838643f7221
• Upwork Job ID: 1714715542878093312
• Last Price Increase: 2023-12-06
• Automatic offers:
• aimane-chnaif | Reviewer | 28037671
• DylanDylann | Contributor | 28037673

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[cooldev900]

@lanitochka17
could you please upload videos for this issue?

[abdel-h66]

Proposal

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

A disable category will never show up in the categories when it's selected and the category count is less than 8.

What is the root cause of that problem?

• The user expects to see the selected category within the categories list even if it's disabled, because hiding while it's actually selected is misleading.
• The first, that getCategoryListSections does, is to filter out any disabled options via. →

    const categoriesValues = _.chain(categories)
        .values()
        .filter((category) => category.enabled)
        .value();

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

→ We should find the selected, but disabled categories using the following =>

    const selectedDisabledOptions = _.filter(categories, (category) => !category.enabled && selectedOptions.find((option) => option.name === category.name));

→ In the case of numberOfCategories < CATEGORY_LIST_THRESHOLD
We add the follwing

        if(selectedDisabledOptions.length > 0) { 
            categorySections.push({
                // "Selected" section
                title: '',
                shouldShow: false,
                indexOffset: 0,
                data: getCategoryOptionTree(selectedOptions, true),
            });
        } 

And keep the rest the same.

What alternative solutions did you explore? (Optional)

N/A

[DylanDylann]

Proposal

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

Selected category is not in the list when it is disabled and there is <8 categories

What is the root cause of that problem?

Let's see the logic to get categories

App/src/libs/OptionsListUtils.js

Line 765 in 69119aa

if (numberOfCategories < CONST.CATEGORY_LIST_THRESHOLD) {

If numberOfCategories < 8, we return all enable categories

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

we should move this code

App/src/libs/OptionsListUtils.js

Lines 787 to 797 in 69119aa

	if (!_.isEmpty(selectedOptions)) {
	categorySections.push({
	// "Selected" section
	title: '',
	shouldShow: false,
	indexOffset,
	data: getCategoryOptionTree(selectedOptions, true),
	});
	indexOffset += selectedOptions.length;
	}

to before

App/src/libs/OptionsListUtils.js

Line 765 in 69119aa

if (numberOfCategories < CONST.CATEGORY_LIST_THRESHOLD) {

and in here

App/src/libs/OptionsListUtils.js

Line 771 in 69119aa

data: getCategoryOptionTree(categoriesValues),

update to

data: getCategoryOptionTree(lodashDifferenceBy(categoriesValues, selectedOptions, 'name')),

One more thing, when there is a selected category we also need to decrease the threshold to ensure we only display 7 categories
in here

App/src/libs/OptionsListUtils.js

Line 765 in 69119aa

if (numberOfCategories < CONST.CATEGORY_LIST_THRESHOLD) {

update like that

const categoryListThreshold = !_.isEmpty(selectedOptions) ? CONST.CATEGORY_LIST_THRESHOLD - 1 : CONST.CATEGORY_LIST_THRESHOLD;

    if (numberOfCategories < categoryListThreshold) {

What alternative solutions did you explore? (Optional)

[lanitochka17]

@cooldev900 Hello
The video has been added to the Screenshot tab.