[HOLD for payment 2023-10-20][$500] Web - IOU Category - Non-selectable parent for subcategories can be selected with arrow keys

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

Precondition: Admin has created a few subcategories that do not have a parent category for a workspace on OldDot.

1. Log in to https://staging.new.expensify.com/
   as the workspace employee.
2. Go to the workspace chat > + button > Request money > Manual.
3. Enter any amount and click Next > Show more > Category.
4. Using keyboard arrow, navigate to the grayed-out parent.
5. Hit Enter.

Expected Result:

The grayed-out parent is not selectable. User should not be able to navigate to it with arrow keys on keyboard.

Actual Result:

The grayed-out parent can be selected using keyboard, although it is not visually visible. Hitting Enter results in a subcategory being selected randomly.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.78-3

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

Notes/Photos/Videos: Any additional supporting documentation

Bug6227039_1696579450742.20231006_033844.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause-Internal Team

Slack conversation: @

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0139e85a909ef2f65e
• Upwork Job ID: 1710215405315522560
• Last Price Increase: 2023-10-06
• Automatic offers:
• akinwale | Reviewer | 27096010
• tienifr | Contributor | 27096012

Issue Owner

Current Issue Owner: @kevinksullivan

Issue Owner

Current Issue Owner: @kevinksullivan

[melvin-bot]

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

[melvin-bot]

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

[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 - @akinwale (External)

[tienifr]

Proposal

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

The grayed-out parent can be selected using keyboard, although it is not visually visible. Hitting Enter results in a subcategory being selected randomly.

What is the root cause of that problem?

In here, even when the category is empty when requesting money (when no category is selected), it's still appending this category to the "Recents" list. This leads to an incorrect empty record in the "Recent" list in Category Picker which doesn't show in the Options list but affect the indexes of the arrow navigation.

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

In here, we check if the category is empty, if yes we don't add it to the optimisticPolicyRecentlyUsedCategories.

Or we can filter that optimisticPolicyRecentlyUsedCategories to filter out the empty items after that line.

That will solve the root cause of the issues, but existing users might still face it until after they request money again. If we want to fix for them too then we can filter out the invalid (empty) categories when connecting to the POLICY_RECENTLY_USED_CATEGORIES list in Onyx. Or proactively updating Onyx to remove invalid/empty categories when we connect to the POLICY_RECENTLY_USED_CATEGORIES Onyx key here.

What alternative solutions did you explore? (Optional)

NA

[akinwale]

@tienifr's proposal correctly identifies the root cause and the proposed solution is adequate.

@tienifr It looks like the optimisticPolicyRecentlyUsedCategories list is always updated for every request, so it's feasible to also remove empty items from uniquePolicyRecentlyUsedCategories here, since that already has a filter operation.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

Triggered auto assignment to @Julesssss, see https://stackoverflow.com/c/expensify/questions/7972 for more details.