[$250] Workspace - mWeb - Currency selector scrolls to the top when I scroll down quickly

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.88-3
Reproducible in staging?: Yes
Reproducible in production?: Unable to check
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: #53845
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Apple iPhone 12 Pro / Safari
App Component: Workspace Settings

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in with a Gmail account that already has a workspace
3. Navigate to Settings - Workspaces
4. Tap on the "New workspace" button
5. Tap on "Default currency" and quickly swipe up

Expected Result:

Currency selector should scroll down.

Actual Result:

Currency selector scrolls to the top when I scroll down quickly.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6719916_1737467985381.RTSM3943.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021882074796298844828
• Upwork Job ID: 1882074796298844828
• Last Price Increase: 2025-01-22
• Automatic offers:
• ZhenjaHorbach | Reviewer | 105822350

Issue Owner

Current Issue Owner: @ZhenjaHorbach

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @RachCHopkins (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]

💬 A slack conversation has been started in #expensify-open-source

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

[allgandalf]

@Krishna2323 will fix this one too as part of #55575

[Beamanator]

Looks like this exists in the prod app, as proven here: https://expensify.slack.com/archives/C01GTK53T8Q/p1737550239414369?thread_ts=1737487302.110339&cid=C01GTK53T8Q

[carlosmiceli]

@allgandalf should I assign this issue to @Krishna2323 or no need?

[allgandalf]

naah, this is an exisiting bug on production, so you and @RachCHopkins would need to decide if you want to get this fixed now and if so then open it up for proposals, happy to help as C+ as well to review proposals

[carlosmiceli]

Gotcha, just wasn't sure if the PR that got CPed also fixed this issue, but I guess you're saying that that's not the case in the end, right?

[parasharrajat]

I can also help.. Let me see root cause as well.

[allgandalf]

but I guess you're saying that that's not the case in the end, right?

BINGOOOO! , you're right

[melvin-bot]

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

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

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

[ZhenjaHorbach]

Gotcha, just wasn't sure if the PR that got CPed also fixed this issue, but I guess you're saying that that's not the case in the end, right?

Yeah
I also confirm that this is another issue
And it is still being reproduced
So we are waiting for proposals !

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[rbreecedev]

Can I have access to the repo to Propose Solutions and Apply on Upwork?

https://www.upwork.com/freelancers/~0139632a87702aa65c?companyReference=852033097033912321&mp_source=share

[melvin-bot]

📣 @rbreecedev! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[rbreecedev]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~0139632a87702aa65c?companyReference=852033097033912321&mp_source=share

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[bernhardoj]

Proposal

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

Currently selector list scrolls up if we scroll down immediately after the page opens.

What is the root cause of that problem?

This all happens because of useSyncFocus.

App/src/hooks/useSyncFocus/index.ts

Lines 16 to 25 in 523edfe

	const didScreenTransitionEnd = contextValue ? contextValue.didScreenTransitionEnd : true;
	useLayoutEffect(() => {
	if (!isFocused || !shouldSyncFocus || !didScreenTransitionEnd) {
	return;
	}
	ref.current?.focus();
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [didScreenTransitionEnd, isFocused, ref]);

useSyncFocus purpose is to synchronize the list focused index with the browser focused element. For example, if we press the arrow down key to focus on the next item, the focused/active element (document.activeElement) of the web now is the next item.

In our case, when we open the page and scroll down quickly, the useSyncFocus kicks in and focuses on the focused item which will by default scroll the list into the focused element. useSyncFocus doesn't happen immediately because we wait for screen transition (didScreenTransitionEnd).

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

We have 2 options. First, we can disable the list scrolling and only enable it after the screen transition ends.

The 2nd option is to prevent scrolling from useSyncFocus.

ref.current?.focus({ preventScroll: true });

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

N/A

[ZhenjaHorbach]

@bernhardoj
Thanks for your proposal !
Your root cause makes sense to me

But I'm not sure about the first option
Since we have quite a large delay before transitionEnds becomes equal to true
As result this will make the user experience much worse

On the other side I like the second option
This option fixes the issue and does not break the original functionality of the hook !

So I don't mind to go with this proposal !
🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

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

Offer link
Upwork job