[$250] Categorizing - Selected category is not highlighted in category list

[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: 9.0.4-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4695697
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Go to + > Submit expense > Manual
4. Enter amount and proceed to confirmation page
5. Select a category from Category field
6. Click Category
7. Note that the selected category is highlighted
8. Go to self DM, and track an expense
9. Select Categorize it from the list of next steps in the chat
10. Select a category
11. On confirmation page, click Category

Expected Result:

When categorizing expense, the selected category will be highlighted and have a green checkmark on the category list, which is the behavior when submitting expense

Actual Result:

When categorizing expense, the selected category is not highlighted - it only has the green checkmark

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

Bug6533165_1720102083822.20240704_220335.mp4

2024-07-08_12-45-02.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fd0566560db3a8d2
• Upwork Job ID: 1810386588500889384
• Last Price Increase: 2024-07-15

Issue Owner

Current Issue Owner: @jasperhuangg

[melvin-bot]

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

[dominictb]

Proposal

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

• When categorizing expense, the selected category is not highlighted

What is the root cause of that problem?

• In submit expense flow, the selected category is highlighted properly because the initial state of the focusedIndex is always 0 if there is any selected option. This is because the category picker screen is always mounted once we open that screen.

• In the categorize expense flow, the selected category is not highlighted because of the following sequence of events: Assume we are on the participant screen, with the screen stack as ["Money_Request_Step_Participants"]. When a workspace is selected, it navigates the user to the category picker screen, changing the screen stack to ["Money_Request_Step_Participants", "Money_Request_Step_Category"]. The initial state of the focusedIndex is -1. After choosing a category option, the user is navigated to the confirmation screen, resulting in a screen stack of ["Money_Request_Step_Participants", "Money_Request_Step_Category", "Money_Request_Step_Confirmation"]. If the user clicks on the category field again, they are taken back to the category picker screen, with the screen stack now as ["Money_Request_Step_Participants", "Money_Request_Step_Category"]. As the category picker screen is not remounted as it was in the submit expense flow, the initial state of the focusedIndex remains -1, causing the bug where the selected category is not highlighted.

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

• We need to make sure, the category picker screen is always mounted again once we visit it. We can do it by updating:
  

  App/src/pages/iou/request/step/IOURequestStepCategory.tsx

  Lines 147 to 150 in 74a6dbb

  	if (action === CONST.IOU.ACTION.CATEGORIZE) {
  	Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(action, iouType, transactionID, report?.reportID ?? '-1'));
  	return;
  	}

  
  to:

        if (action === CONST.IOU.ACTION.CATEGORIZE) {
            Navigation.goBack()
            Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(action, iouType, transactionID, report?.reportID ?? '-1'));
            return;
        }

it will pop the category picker screen from the screen stack once we choose any category.

What alternative solutions did you explore? (Optional)

[melvin-bot]

@Christinadobrzyn Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[Christinadobrzyn]

I can reproduce this - added some details in the OP and a video. I think this can be external.

[melvin-bot]

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