[Due for payment 2025-03-21] [$250] Tags-In approver section, green checkmark while select user is not visible before leaving page

[mitarachim]

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: V9.1.7-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: N
Email or phone of affected tester (no customers): N
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Workspace Settings

Action Performed:

Pre-condition: Have a control workspace with rules enabled and tag created

1. Launch app
2. Tap categories -Advertising -approver
3. Select user displayed in dropdown
4. Note after selected green checkmark is visible before leaving the page
5. Again tap approver
6. Unselect the user and now note the green checkmark is removed before leaving the page
7. Go to workspace settings - tags
8. Tap on a tag - approver
9. Select user in dropdown
10. Note after selected green checkmark is not visible before leaving the page
11. Unselect the user and now note the green checkmark removed is not visible before leaving the page

Expected Result:

In categories&tags-approver section :

1. Green checkmark must be visible before leaving the page while select approver .
2. Green checkmark must not visible before leaving the page while unselect approver .

Actual Result:

In tags-approver section,

1. Green checkmark not visible before leaving the page while select approver .
2. Green checkmark visible before leaving the page while unselect approver .

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6755777_1740624578918.Screenrecorder-2025-02-27-08-04-44-521.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021897737213539397584
• Upwork Job ID: 1897737213539397584
• Last Price Increase: 2025-03-06
• Automatic offers:
• QichenZhu | Reviewer | 106473930

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

Triggered auto assignment to @abekkala (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.

[bernhardoj]

Proposal

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

In tag approver selection, when selecting the approver, the green checkmark doesn't show before leaving the page like on the category approver page. It also doesn't disappear when unselecting.

What is the root cause of that problem?

The checkmark shows based on the selected approver data.

App/src/pages/workspace/tags/TagApproverPage.tsx

Line 52 in 5b10645

selectedApprover={tagApprover ?? ''}

However, on the tag page, the selected approver data isn't updated dynamically. That's because even when the policy is updated, the re-calculation of the selected approver isn't happening because we only use policyID.

App/src/pages/workspace/tags/TagApproverPage.tsx

Line 25 in 5b10645

const tagApprover = PolicyUtils.getTagApproverRule(policyID, tagName)?.approver;

If we compare it to the category approver page, we use the policy object itself, so it's updated dynamically

App/src/pages/workspace/categories/CategoryApproverPage.tsx

Lines 27 to 29 in 5b10645

	const policy = usePolicy(policyID);
	const selectedApprover = CategoryUtils.getCategoryApproverRule(policy?.rules?.approvalRules ?? [], categoryName)?.approver ?? '';

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

If the expectation is to show the checkmark while the page is closing, then we need to do the same thing on the category approver page.

const policy = usePolicy(policyID);

const tagApprover = PolicyUtils.getTagApproverRule(policy, tagName)?.approver;

If we don't want the checkmark to show/disappear while the page is closing, we can remove the usage of setNavigationActionToMicrotaskQueue so the page is closed immediately after selecting the item, reducing the chance for the user to notice the checkmark, but I don't see the reason we want to do this though, there is nothing wrong to let the user see their updated selection.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A, it's a visual issue

[melvin-bot]

@abekkala Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@abekkala Still overdue 6 days?! Let's take care of this!

[melvin-bot]

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

[melvin-bot]

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