[HOLD for payment 2025-01-21] [$250] Start chat - The list does not scroll to the top automatically after adding a user.

[IuliiaHerets]

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: v9.0.79-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5380227
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: macOS Sequoia 15.1.1, Desktop/Web
App Component: Search

Action Performed:

1. Open the desktop app or go to the URL: https://staging.new.expensify.com/
2. Log in with a expensifail account
3. Click on FAB > Start chat
4. After 'Start chat' screen is opened, press the key 'TAB'
5. Press the down arrow to scroll down until the top of the list is not visible
6. Press the key 'TAB' again. Note that now 'Add to group' is selected
7. Press the key 'ENTER'

Expected Result:

The user should be re-directed automatically to the top of the list.

Actual Result:

After a member is added to group, the user is not re-directed automatically to the top of the list.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6702731_1735262665225.5at_10.14.15_PM.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021874054230559291011
• Upwork Job ID: 1874054230559291011
• Last Price Increase: 2025-01-07
• Automatic offers:
• daledah | Contributor | 105616888

Issue Owner

Current Issue Owner: @laurenreidexpensify

[melvin-bot]

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

[bernhardoj]

Proposal

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

The list doesn't scroll to the selected item on the new chat page.

What is the root cause of that problem?

By default, a selection list will scroll to the selected item when selected.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 356 to 359 in e94df0f

	if (!item.isSelected) {
	// If we're selecting an item, scroll to it's position at the top, so we can see it
	scrollToIndex(Math.max(selectedOptionsCount - 1, 0), true);
	}

However, we use a custom right side component for the new chat page.

App/src/pages/NewChatPage.tsx

Lines 225 to 244 in e94df0f

	function toggleOption(option: ListItem & Partial<OptionData>) {
	const isOptionInList = !!option.isSelected;
	let newSelectedOptions;
	if (isOptionInList) {
	newSelectedOptions = reject(selectedOptions, (selectedOption) => selectedOption.login === option.login);
	} else {
	newSelectedOptions = [...selectedOptions, {...option, isSelected: true, selected: true, reportID: option.reportID ?? '-1'}];
	}
	selectionListRef?.current?.clearInputAfterSelect?.();
	setSelectedOptions(newSelectedOptions);
	}
	if (item.isSelected) {
	return (
	<PressableWithFeedback
	onPress={() => toggleOption(item)}

And currently, we only clear the text input when adding a user to a group selection list. So, the scroll never happens.

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

If we want to have the same behavior as selection list, we can call the scroll to index from the new chat page.

selectionListRef?.current?.clearInputAfterSelect?.();
selectionListRef?.current?.scrollToIndex(Math.max(newSelectedOptions.length - 1, 0), true);

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

I think we can test the UI that after adding a user, the selected user is visible to the screen.

[melvin-bot]

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

[melvin-bot]

@laurenreidexpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

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

[melvin-bot]

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

[daledah]

Proposal

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

After a member is added to group, the user is not re-directed automatically to the top of the list.

What is the root cause of that problem?

On BaseSelectionList, we have the logic to trigger scroll to index

App/src/components/SelectionList/BaseSelectionList.tsx

Line 359 in e5108a1

scrollToIndex(Math.max(selectedOptionsCount - 1, 0), true);

clearInputAfterSelect, and then focus on the input.

but on NewChatPage we don't call selectRow of BaseSelectionList, instead of that we have the custom toggleOption

In this function, we just clearInputAfterSelect, so the list doesn't scroll to top

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

1. To handle scroll to top behavior, we should call scrollToIndex in here

selectionListRef?.current?.scrollToIndex(Math.max(newSelectedOptions.length - 1, 0), true);

2. If we just do that, the list can scroll to top only when users click to Add to group
   It doesn't happen on BaseSelectionList since we focus on the input after selecting option

So to fix that issue and make things consistency, we need to call focusTextInput

• In BaseSelectionList, add focusTextInput to useImperativeHandle
• Then trigger focusTextInput here

selectionListRef.current?.focusTextInput();

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

We can add the UI tests that after adding user to group, the selected user is visible.

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[github-actions]

user Your proposal will be dismissed because you did not follow the proposal template.

[dukenv0307]

@bernhardoj's solution doesn't work on my side. We can go with @daledah's proposal, it works well same as other selection list

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @robertjchen, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[laurenreidexpensify]

@robertjchen please confirm when you have a moment thanks

[dukenv0307]

@robertjchen Can you please take a look at this issue when you have a chance? Thanks

[bernhardoj]

@daledah solution to scroll to top is exactly the same as mine, so I'm not sure how can mine doesn't work.

[dukenv0307]

@bernhardoj It didn't work on my side when using the keyboard only. It just worked if I clicked on the item.

[bernhardoj]

I wanna retest it, but looks like it's always scroll to the top now.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[laurenreidexpensify]

@robertjchen bump for 👀 thanks

[dukenv0307]

I still can reproduce and keep the decision here @robertjchen

[robertjchen]

Revisiting this 👀

[robertjchen]

Reviewed- I think we'll go with @daledah for this one, thanks!

[melvin-bot]

📣 @daledah 🎉 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 📖

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

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.84-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: scroll list to the top when adding user #54994

If no regressions arise, payment will be issued on 2025-01-21. 🎊

For reference, here are some details about the assignees on this issue:

• @dukenv0307 requires payment through NewDot Manual Requests
• @daledah requires payment automatic offer (Contributor)

[melvin-bot]

@dukenv0307 @laurenreidexpensify @dukenv0307 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]