[HOLD for payment 2024-02-07] [HOLD for payment 2024-02-07] [$500][Wave 9][Low] Mweb - BA - When user selects "State", the drop down list gets scrolled

[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.6-1
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Tap profile icon
3. Tap Workspaces
4. Tap on a Workspace
5. Tap Bank account
6. Tap connect manually
7. Enter all fields and tap next
8. Select a state
9. Tap on state again and select any other state from the list

Expected Result:

When user selects "State", the drop down list must not be scrolled

Actual Result:

When user selects "State", the drop down list gets scrolled

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

Bug6296573_1701377547280.usethu.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b6d7a0421d65ccee
• Upwork Job ID: 1730336841339785216
• Last Price Increase: 2023-12-26

[melvin-bot]

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

[melvin-bot]

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

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

[junsuparkswe]

I don't understand the issue since there is no drop down menu for selecting state. In the video, the scrolling occurs due to the user scrolling up, right?

[barros001]

This is not a bug, it's intentional. All lists always scroll to the selected item, if any.

App/src/components/SelectionList/BaseSelectionList.js

Line 472 in 4fc20d3

onLayout={scrollToFocusedIndexOnFirstRender}

App/src/components/SelectionList/BaseSelectionList.js

Lines 317 to 333 in 4fc20d3

	const scrollToFocusedIndexOnFirstRender = useCallback(
	({nativeEvent}) => {
	if (shouldUseDynamicMaxToRenderPerBatch) {
	const listHeight = lodashGet(nativeEvent, 'layout.height', 0);
	const itemHeight = lodashGet(nativeEvent, 'layout.y', 0);
	setMaxToRenderPerBatch((Math.ceil(listHeight / itemHeight) || 0) + CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT);
	}
	if (!firstLayoutRef.current) {
	return;
	}
	scrollToIndex(focusedIndex, false);
	firstLayoutRef.current = false;
	},
	[focusedIndex, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch],
	);

[SSRV25]

I don't think this is a bug or problem as it is useful as of UX perspective.

[bernhardoj]

Proposal

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

Every time we close a state selection page, the page is scrolled to the top.

What is the root cause of that problem?

We have a logic to highlight and scroll to the top every time the sections data changes.

App/src/components/SelectionList/BaseSelectionList.js

Lines 358 to 369 in 6301426

	useEffect(() => {
	// do not change focus on the first render, as it should focus on the selected item
	if (firstLayoutRef.current) {
	return;
	}
	// set the focus on the first item when the sections list is changed
	if (sections.length > 0) {
	updateAndScrollToFocusedIndex(0);
	}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [sections]);

When we close the state selection page, the sections data is actually not changed, but the problem is we always pass a new instance of sections to the component.

App/src/components/StatePicker/StateSelectorModal.js

Lines 95 to 99 in 6301426

	<SelectionList
	headerMessage={headerMessage}
	textInputLabel={label || translate('common.state')}
	textInputValue={searchValue}
	sections={[{data: searchResults, indexOffset: 0}]}

State selection page itself is a modal, so when we close it, the isVisible state is changed to false which will re-render the state selection modal component.

App/src/components/StatePicker/StateSelectorModal.js

Lines 76 to 78 in 6301426

	<Modal
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	isVisible={isVisible}

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

Memoize the sections to prevent passing a new instance of it to the list component.

const sections = useMemo(() => [{data: searchResults, indexOffset: 0}], [searchResults]);