[$250] Scan split - Confirmation page & Category RHPs appear together when opening Category

[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!

---

Version Number: 1.4.63-5
Reproducible in staging?: Y
Reproducible in production?: N
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create a scan split expense.
4. Click on the split preview.
5. Click Category.
6. Select a category.
7. Click Category again.

Expected Result:

There will not be another RHP appearing when opening Category list.

Actual Result:

Confirmation page RHP appears briefly together with Category list RHP when opening 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

Bug6454403_1713491451236.20240419_094012.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014586c0d55dcc99f4
• Upwork Job ID: 1781430402702237696
• Last Price Increase: 2024-04-19
• Automatic offers:
• bernhardoj | Contributor | 0

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @MariaHCD (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[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.

[izarutskaya]

@adelekennedy I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[izarutskaya]

We think this issue might be related to the #collect project.

[izarutskaya]

Production

bandicam.2024-04-19.08-53-24-504.mp4

[MariaHCD]

Unable to reproduce the bug on dev 🤔

Screen.Recording.2024-04-19.at.3.31.15.PM.mov

[MariaHCD]

Oh, I see it happens once the expense is submitted and scanning is in progress:

Screen.Recording.2024-04-19.at.3.34.47.PM.mov

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

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

[adelekennedy]

@MariaHCD is this an actual deploy blocker? Or can we scale this back to a high priority bug?

[adelekennedy]

related to categories - making this wave collect!

[melvin-bot]

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

[melvin-bot]

Current assignee @thesahindia is eligible for the External assigner, not assigning anyone new.

[adelekennedy]

removed the deploy blocker label and re-added the external label

[bernhardoj]

Proposal

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

The navigation transition is really weird when navigating to the money request category page.

What is the root cause of that problem?

On the category page, we use a selection list. In the selection list (specifically in BaseListItem), we have a useSyncFocus that will give the selected/focused item a browser focus (.focus())

App/src/hooks/useSyncFocus/index.ts

Lines 11 to 17 in 8616678

	useLayoutEffect(() => {
	if (!isFocused) {
	return;
	}
	ref.current?.focus();
	}, [isFocused, ref]);

Because we focus immediately after mount, you can see that the navigation transition animation for the category page is gone and there is a weird transition happening only when we open the category page from the SplitBillDetailsPage.

Focusing on an element after component mount is a common issue we face, that's why we always delay, for example, auto focus on a page or waiting for screen transition end.

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

In our case, we can either wrap selection list with withNavigationTransitionEnd HOC to get the transition end state or just use isInitialSectionListRender state. It's simpler to use isInitialSectionListRender.

isInitialSectionListRender initial value is true and will be set to false when the selection list calls onLayout. Then, we will only enable the focus once isInitialSectionListRender becomes false.

App/src/components/SelectionList/BaseSelectionList.tsx

Line 361 in 8616678

shouldSyncFocus={!isTextInputFocusedRef.current}

shouldSyncFocus={!isTextInputFocusedRef.current && !isInitialSectionListRender}

If we want to use transition end, then it becomes

shouldSyncFocus={!isTextInputFocusedRef.current && didScreenTransitionEnd}

[MariaHCD]

I agree that this doesn't need to block the deploy.

@thesahindia could you review the above proposal?

[adelekennedy]

@thesahindia bump on the proposal review!

[thesahindia]

@bernhardoj's proposal looks good to me!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @MariaHCD is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @bernhardoj 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[bernhardoj]

This is already fixed in #40562. I can't reproduce it anymore. Can someone retest?

[MariaHCD]

@izarutskaya could you please retest this to see if it's still reproducible?

[MariaHCD]

Not overdue, we just need to retest this. cc: @izarutskaya

[melvin-bot]

@MariaHCD @bernhardoj @adelekennedy @thesahindia this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[adelekennedy]

@izarutskaya has this been retested?

[adelekennedy]

I can't reproduce - I'm going to close this one and we can reopen if this happens again?