[Wave 6: Tags][$500][HOLD https://github.com/Expensify/App/issues/32735] Tag - Two tags are highlighted when one sub-tag is selected

[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: Y
Reproducible in staging?: N
Reproducible in production?:
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: User is a member of workspace that has some tags in Parent: Child format. There has to be at least 9 tags in the policy.

1. Go to the workspace chat
2. Click + > Request money > Manual
3. Enter amount > Next
4. Click Show more > Tag
5. Select a subcategory
6. Click Tag

Expected Result:

Only the selected tag is highlighted

Actual Result:

Two tags are highlighted when a sub-tag is selected

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

Add any screenshot/video evidence

Bug6302305_1701805501243.20231206_004546.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01da048e9d51f0937c
• Upwork Job ID: 1732341978058440704
• Last Price Increase: 2023-12-13

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @aldo-expensify (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[aldo-expensify]

@lanitochka17 what was the account used to reproduce this? Otherwise, can we have clearer steps on how to create the tags in the "Precondition"? I tried creating a workspace with multilevel tags in OldDot and I don't see what you see in the video. I don't see multiple levels.

[aldo-expensify]

I'm only seeing one level in NewDot:

I setup up "dependent" multilevel tags in OldDot.

[lanitochka17]

@aldo-expensify Hello
Follow the instructions in the file, but as for tags:
https://expensify.testrail.io/index.php?/runs/view/19265&group_by=cases:section_id&group_order=asc&group_id=296764

[aldo-expensify]

Thanks, I got the tags working now!

[aldo-expensify]

I'm failing to reproduce this in staging:

1. I select a nested tag
2. I click again the tag to open the selection menu
3. The only highlighted tag is the selected one

Screen.Recording.2023-12-05.at.1.35.02.PM.mov

[aldo-expensify]

@lanitochka17 what is the account email used in the test?

[aldo-expensify]

Removing deploy blocker since I can't reproduce and doesn't look very important to hold the deploy on it

[lanitochka17]

@aldo-expensify tags must be more than 9

[aldo-expensify]

I'll try that

[aldo-expensify]

@lanitochka17 thanks, I managed to reproduce now:

Considering that nested tags is not handled in production yet (it is a new feature), I think it is fine we don't block the deploy on it and we fix improve it as a follow up

[lanitochka17]

@aldo-expensify thanks

[aldo-expensify]

This may have the same cause as:

• [HOLD for payment 2024-01-24] [$500] Category - Selected category is not in the list when it is disabled and there is <8 categories #29901
• [HOLD for payment 2023-12-04] [$500] [Wave 6: Tags] In the Tag list, two tags are highlighted at the same time #30465

[melvin-bot]

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

[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

[dukenv0307]

Proposal

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

Two tags are highlighted when a sub-tag is selected

What is the root cause of that problem?

We're not setting isOneLine true in getTagsOptions of selected options here similar to what we're doing with the category selected options. So the selected tags will show as nested rather than "Parent: Child" which is the correct pattern. It also causes this issue.

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

Set isOneLine true in getTagsOptions of selected options here

We need to pass it through from getTagsOptions to getIndentedOptionTree here as well

What alternative solutions did you explore? (Optional)

We can consider doing the same for the search options, this will make it consistent with the categories

[aldo-expensify]

@Santhosh-Sellavel thoughts on the proposal: #32521 (comment) ?

[Santhosh-Sellavel]

I haven't tested it out yet, the proposal sounds good to me.

Can I get a CSV file for multilevel tags?

[dukenv0307]

@Santhosh-Sellavel FYI we can test it by setting the Tags to Onyx (note to replace with the correct policy id). The Accounting below is the one with children.

Onyx.set('policyTags_${YOUR-POLICY-ID}', {
    Department: {
        name: 'Department',
        tags: {
            'Accounting: Child 1': {
                name: 'Accounting: Child 1',
                enabled: true,
            },
            'Accounting: Child 2': {
                name: 'Accounting: Child 2',
                enabled: true,
            },
            Design: {
                name: 'Design',
                enabled: true,
            },
            Engineering: {
                name: 'Engineering',
                enabled: true,
            },
            HR: {
                name: 'HR',
                enabled: true,
            },
            Infra: {
                name: 'Infra',
                enabled: true,
            },
            Legal: {
                name: 'Legal',
                enabled: true,
            },
            Marketing: {
                name: 'Marketing',
                enabled: true,
            },
            Ops: {
                name: 'Ops',
                enabled: true,
            },
            Sales: {
                name: 'Sales',
                enabled: true,
            },
        },
    },
});

[dukenv0307]

@Santhosh-Sellavel After the fix, it will correctly look like this (similar to the Categories)

[dylanexpensify]

@Santhosh-Sellavel to review!

[aldo-expensify]

Can I get a CSV file for multilevel tags?

@Santhosh-Sellavel you don't need the "Do you want to use multiple levels of" option, you have to create normal tags using the format parent: child. These instructions are for categories, but they also apply for tags and I reproduced using them.

Note: you also need to create at least 9 tags

[Santhosh-Sellavel]

Can I get a CSV file for multilevel tags?

@Santhosh-Sellavel you don't need the "Do you want to use multiple levels of" option, you have to create normal tags using the format parent: child. These instructions are for categories, but they also apply for tags and I reproduced using them.

Note: you also need to create at least 9 tags

For Categories worked fine, but for Tags it didn't work for me. Will try again though.

[Santhosh-Sellavel]

@aldo-expensify Are you taking over this as CME, lets go with @dukenv0307 proposal here

[aldo-expensify]

oh, so the expected results in the GH description is wrong? Tags are not expected to behave as categories when in form Parent: child? I understand that @dukenv0307 's proposal will disable the nesting.

@dylanexpensify can you help me confirm what is the expected behaviour here? Should tags in form Parent: child show nested? or is that only for categories?

[dukenv0307]

oh, so the expected results in the GH description is wrong? Tags are not expected to behave as categories when in form Parent: child? I understand that @dukenv0307 's #32521 (comment) will disable the nesting.

@aldo-expensify Tags in form of Parent: child will still show nested in the tag list (like the Accounting > Child 2 below), my proposal is only so that the selected one will not show nested, so it will look like this (which is consistent with the categories)

Currently it looks quite bad, like this which are 2 nested tag groups that are disconnected from each other, it's not clear if the first Accounting is the list section header or the tag group parent (also it's inconsistent with categories UI)

cc @dylanexpensify

[dylanexpensify]

Hmmm @puneetlath @greg-schroeder any ideas?

[aldo-expensify]

@aldo-expensify Tags in form of Parent: child will still show nested in the tag list (like the Accounting > Child 2 below), my proposal is only so that the selected one will not show nested, so it will look like this (which is consistent with the categories)

Oh, I understand now, for a moment I thought it was going to remove all nesting, but it only does for the selected item. That looks good to me then, specially if it is consistent with categories.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[Santhosh-Sellavel]

@aldo-expensify Let's assign @dukenv0307 here, thanks!

[aldo-expensify]

@dylanexpensify I'll proceed with hiring @dukenv0307 since I think the path is clear enough

[puneetlath]

Tags are not supposed to be nested. That was implemented by mistake and is being reverted.

[aldo-expensify]

ohh, so the expectation is wrong. Do we have an issue where the revert is being handled? If we do, we should HOLD on that or just close this.

[aldo-expensify]

Sorry @dukenv0307 for the confusion, I'll remove you while we figure out the way forward.

Ignore me.. I see I never assigned you anyway :P

[puneetlath]

Yep! #32735

[aldo-expensify]

Thanks @puneetlath !

Added HOLD so we can check once #32735 is implemented, most likely this won't be an issue anymore.

[greg-schroeder]

Closing this following the revert