Request money - Scroll Issue When Navigating Back to the Amount After Selecting a User and Revisiting

[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: 1.4.24-0
Reproducible in staging?: Y
Reproducible in production?: N
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Sign in to staging Expensify
2. FAB > Request Money
3. Add amount
4. Select user or workspace
5. Navigate back to the amount
6. Navigate again to the user. Observe that the page has been scrolled

Expected Result:

The page should not scroll by itself when navigating back to the amount after selecting a user and then navigating again to the selected user."

Actual Result:

The page scrolls by itself when navigating back to the amount after selecting a user and then navigating again to the selected user

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

Bug6338013_1704910442890.Screen_Recording_2024-01-10_at_9.21.08_AM.mp4

View all open jobs on GitHub

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

[melvin-bot]

Triggered auto assignment to @puneetlath (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[abzokhattab]

App/src/components/OptionsSelector/BaseOptionsSelector.js

Lines 184 to 189 in 82e9c7c

	// Otherwise, scroll to the focused index (as long as it's in range)
	if (this.state.allOptions.length <= this.state.focusedIndex || !isNewFocusedIndex) {
	return;
	}
	this.scrollToIndex(this.state.focusedIndex);
	},

Proposal

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

the app scrolls to the first unselected item when Navigating Back to the Amount After Selecting a User and Revisiting

What is the root cause of that problem?

the options component rerenders because the section data changes ..

and thus the componentDidUpdate to be triggered

App/src/components/OptionsSelector/BaseOptionsSelector.js

Line 144 in 82e9c7c

componentDidUpdate(prevProps, prevState) {

and then this line is executed causing the app to scroll on the focused item

App/src/components/OptionsSelector/BaseOptionsSelector.js

Line 188 in 82e9c7c

this.scrollToIndex(this.state.focusedIndex);

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

we need to add this condition (this.state.value === prevState.value && this.props.selectedOptions.length === prevProps.selectedOptions.length) which ensures that the app doesnt change the scroll whenever the search input is the same in the prev and the current state and same for the selectedoptions.lenght

we should add this condition here:

     if (
                    this.state.allOptions.length <= this.state.focusedIndex ||
                    !isNewFocusedIndex ||
                    (this.state.value === prevState.value && this.props.selectedOptions.length === prevProps.selectedOptions.length)
                ) {
                    return;
                }

[thienlnam]

I wonder if this is also fixed in #34244

[situchan]

I wonder if this is also fixed in #34244

I don't think so. It's different bug. BaseInvertedFlatList is only used in report screen

[thienlnam]

Actually, I can't seem the reproduce the issue on staging anymore

[situchan]

I am not able to reproduce. This maybe fixed in #34267

[thienlnam]

Screen.Recording.2024-01-11.at.12.35.54.PM.mov