Stop scrolling to top when selecting an item #65449

ChavdaSachin · 2025-07-03T19:52:22Z

Explanation of Change

Fixed Issues

$ #61414
PROPOSAL: #61414 (comment)

Tests

Same as QA.

Verify that no errors appear in the JS console

Offline tests

Same as QA.

QA Steps

// TODO: These must be filled out, or the issue title must include "[No QA]."
Tests:

Search page:

Go to reports > filters.
Click filter Type > select Expense and save.
Click From filter.
Select a few items.
Verify selected items does not move to top of the list.
Click save
Open the same filter again.
Verify list has initial scroll position such as first selected item is visible.
Select/deselect a few items.
Verify list does not scroll on selecting/deselecting any item.
For filters To, Workspace, Card, Category, Currency, Tag and Tax Rate repeat steps 4-10.
Click filter Type > select Chat and save.
For filter In repeat steps 4-10.
Click filter Type > select Task and save.
For filter Assignee repeat steps 4-10.

Group:

Click FAB > start chat.
Select a few users using Add to group button.
Verify selected items does not move to top of the list and list does not scroll on selecting/deselecting any item.
Click Next > Start Group.
Click group header > Members > Invite members.
Select/Deselect a few members.
Verify selected member does not move to top of the list and list does not scroll on selecting/deselecting any member.

Room:

Click FAB > Start chat > Room > create a room.
Click room header > Members > Invite member.
Select/Deselect a few members.
Verify selected member does not move to top of the list and list does not scroll on selecting/deselecting any member.

Workspace: (create one if needed)

Go to Workspaces > open a workspace.
Go to Members > Invite Member.
Select/Deselect a few members.
Verify selected member does not move to top of the list and list does not scroll on selecting/deselecting any member.

IOU: (prerequisite: user has a control workspace set as the default workspace)

Click FAB > Create expense > Manual.
Enter amount and click Next.
Click Attendees.
Select/Deselect a few members.
Verify selected member does not move to top of the list and list does not scroll on selecting/deselecting any member.
Click Save.
Again open Attendees.
Verify list has initial scroll position such as first selected assignee is visible.

Onboarding:

Create a new account.
Skip Work Email step.
Select Track and budget expenses on purpose select step.
Enter First Name and Last Name, click continue.
Click Create workspace > Continue.
Search and select a few members.
Verify selected member does not move to top of the list and list does not scroll on selecting/deselecting any member.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Screen.Recording.2025-09-02.at.12.27.48.PM.mov

Screen.Recording.2025-09-02.at.12.33.45.PM.mov

Screen.Recording.2025-09-02.at.12.35.00.PM.mov

Screen.Recording.2025-09-02.at.12.36.03.PM.mov

Screen.Recording.2025-09-02.at.12.36.42.PM.mov

Screen.Recording.2025-09-02.at.12.40.49.PM.mov

Android: mWeb Chrome

Screen.Recording.2025-09-02.at.12.47.53.PM.mov

Screen.Recording.2025-09-02.at.12.50.56.PM.mov

Screen.Recording.2025-09-02.at.12.51.41.PM.mov

Screen.Recording.2025-09-02.at.12.52.44.PM.mov

Screen.Recording.2025-09-02.at.12.53.13.PM.mov

Screen.Recording.2025-09-02.at.12.55.05.PM.mov

iOS: Native

Screen.Recording.2025-09-02.at.11.40.25.AM.mov

Screen.Recording.2025-09-02.at.11.46.32.AM.mov

Screen.Recording.2025-09-02.at.11.47.35.AM.mov

Screen.Recording.2025-09-02.at.11.48.58.AM.mov

Screen.Recording.2025-09-02.at.11.51.02.AM.mov

Screen.Recording.2025-09-02.at.11.57.32.AM.mov

iOS: mWeb Safari

Screen.Recording.2025-09-02.at.12.03.21.PM.mov

Screen.Recording.2025-09-02.at.12.07.41.PM.mov

Screen.Recording.2025-09-02.at.12.09.47.PM.mov

Screen.Recording.2025-09-02.at.12.11.30.PM.mov

Screen.Recording.2025-09-02.at.12.12.05.PM.mov

Screen.Recording.2025-09-02.at.12.16.08.PM.mov

MacOS: Chrome / Safari

Screen.Recording.2025-08-31.at.7.03.14.PM.mov

Screen.Recording.2025-08-31.at.7.06.01.PM.mov

Screen.Recording.2025-08-31.at.7.07.00.PM.mov

Screen.Recording.2025-08-31.at.7.07.44.PM.mov

Screen.Recording.2025-08-31.at.7.08.24.PM.mov

Screen.Recording.2025-08-31.at.7.10.55.PM.mov

MacOS: Desktop

Screen.Recording.2025-09-02.at.1.17.37.PM.mov

Screen.Recording.2025-09-02.at.1.21.15.PM.mov

Screen.Recording.2025-09-02.at.1.23.15.PM.mov

Screen.Recording.2025-09-02.at.1.23.44.PM.mov

Screen.Recording.2025-09-02.at.1.24.13.PM.mov

Screen.Recording.2025-09-02.at.1.24.50.PM.mov

ChavdaSachin · 2025-07-03T20:06:08Z

@parasharrajat

When we pass the first index using initiallyFocusedOptionKey prop, I could see a small visual inconsistency

when multiple items are selected this prop would highlight the first selected item and other selected items are not highlighted.

What is the expected behavior for the highlight for both single selection list and multi selection list?

Screen.Recording.2025-07-04.at.12.54.14.AM.mov

Basically after applying following diff suggested in original proposal

--- a/src/components/Search/SearchMultipleSelectionPicker.tsx
+++ b/src/components/Search/SearchMultipleSelectionPicker.tsx
@@ -8,6 +8,7 @@ import type {OptionData} from '@libs/ReportUtils';
 import {sortOptionsWithEmptyValue} from '@libs/SearchQueryUtils';
 import ROUTES from '@src/ROUTES';
 import SearchFilterPageFooterButtons from './SearchFilterPageFooterButtons';
+import SelectableListItem from '@components/SelectionList/SelectableListItem';
 
 type SearchMultipleSelectionPickerItem = {
     name: string;
@@ -32,35 +33,26 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItem
s, pickerTit
         setSelectedItems(initiallySelectedItems ?? []);
     }, [initiallySelectedItems]);
 
-    const {sections, noResultsFound} = useMemo(() => {
-        const selectedItemsSection = selectedItems
-            .filter((item) => item?.name.toLowerCase().includes(debouncedSearchTerm?.to
LowerCase()))
-            .sort((a, b) => sortOptionsWithEmptyValue(a.value as string, b.value as str
ing))
-            .map((item) => ({
-                text: item.name,
-                keyForList: item.name,
-                isSelected: true,
-                value: item.value,
-            }));
+    const {sections, noResultsFound, firstKeyForList} = useMemo(() => {
         const remainingItemsSection = items
-            .filter((item) => selectedItems.some((selectedItem) => selectedItem.value =
== item.value) === false && item?.name?.toLowerCase().includes(debouncedSearchTerm?.toLo
werCase()))
-            .sort((a, b) => sortOptionsWithEmptyValue(a.value as string, b.value as str
ing))
+            .filter((item) => item?.name?.toLowerCase().includes(debouncedSearchTerm?.t
oLowerCase()))
+            .sort((a, b) => sortOptionsWithEmptyValue(a, b))
             .map((item) => ({
                 text: item.name,
                 keyForList: item.name,
-                isSelected: false,
+                isSelected: selectedItems.some((selectedItem) => selectedItem.value ===
 item.value),
                 value: item.value,
             }));
-        const isEmpty = !selectedItemsSection.length && !remainingItemsSection.length;
+
+        const isEmpty = !remainingItemsSection.length;
+
+        const firstSelectedItem = remainingItemsSection.find((item) => item.isSelected)
;
+        const firstKey = firstSelectedItem?.keyForList ?? null;
+
         return {
             sections: isEmpty
                 ? []
                 : [
-                      {
-                          title: undefined,
-                          data: selectedItemsSection,
-                          shouldShow: selectedItemsSection.length > 0,
-                      },
                       {
                           title: pickerTitle,
                           data: remainingItemsSection,
@@ -68,6 +60,7 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems,
 pickerTit
                       },
                   ],
             noResultsFound: isEmpty,
+            firstKeyForList: firstKey,
         };
     }, [selectedItems, items, pickerTitle, debouncedSearchTerm]);
 
@@ -116,7 +109,8 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItem
s, pickerTit
             showLoadingPlaceholder={!noResultsFound}
             shouldShowTooltips
             canSelectMultiple
-            ListItem={MultiSelectListItem}
+            ListItem={SelectableListItem}
+            initiallyFocusedOptionKey={firstKeyForList}
         />
     );
 }

ChavdaSachin · 2025-07-07T18:57:03Z

@parasharrajat waiting for your reply to proceed further...

parasharrajat · 2025-07-08T07:42:18Z

Let's update this behaviour in a way so that it does not highlight. We are only using this prop to scroll to the item.

ChavdaSachin · 2025-07-08T07:49:30Z

For a single selection list, Should we highlight?

parasharrajat · 2025-07-08T07:51:39Z

When the user is using arrow keys to navigate, it makes sense to have highlight to show the active item in the list but otherwise, I don't the point of highlight.

@shawnborton Can you please help us determine whether we should highlight the row or not?

shawnborton · 2025-07-08T10:57:55Z

Hmm why would we change any of the current arrow behavior here? We should just continue to use the existing arrow highlight behavior that we currently have, no? cc @Expensify/design for a gut check.

ChavdaSachin · 2025-07-08T10:59:38Z

I am not asking about the arrows, I am asking about background colour

shawnborton · 2025-07-08T11:01:14Z

Yeah same thing, why would we change any of that behavior? We should leave it as-is.

dannymcclain · 2025-07-08T13:26:52Z

Agree with Shawn, I don't see why we'd need to mess with any of that here.

…lling-and-jumping-selectionList

ChavdaSachin · 2025-07-23T16:41:28Z

@parasharrajat are we looking to apply these changes to popover filters as well?

Screen.Recording.2025-07-23.at.10.08.21.PM.mov

parasharrajat · 2025-07-24T10:21:24Z

Let's not do that for now. If needed we can do that in separate PR.

ChavdaSachin · 2025-07-24T11:29:25Z

Actually From and To advanced filters also use the same hook useSearchParticipantsOptions along with this popover to separate the sections (keeps selected options on top), so keeping it separate would require more complex modification of the hook.

parasharrajat · 2025-07-24T12:36:11Z

Let's keep such pages aside for now. Focus on other SelectionList-based logic. Once you are done, you can list down such pages for us and then we can tackle then in separate PR.

parasharrajat · 2025-08-07T18:04:29Z

@ChavdaSachin What's latest here?

ChavdaSachin · 2025-08-11T12:28:26Z

Most of the pages which are yet to be fixed are related to member lists, and since member lists have quite a complex structure it is taking some time.
I would try to wrap it up in a day or two.

parasharrajat · 2025-08-11T13:18:32Z

If you don't have time to work on this. Let me us know the progress and pending items so we can decide on next steps here.

ChavdaSachin · 2025-08-28T12:22:42Z

Note: MoneyRequestParticipantsSelector hasn't been refactored in this PR.

Reason: Split expense flow has been removed from the app, so it is not possible for value of canSelectMultiple to be true on this particular page.

all the other pages where canSelectMultiple = true are refactored.

cc. @parasharrajat

ps. Contributor who worked on removing split expense flow should refactor all such pages.

ChavdaSachin · 2025-08-28T14:37:13Z

Tests:

Search page:

Go to reports > filters.
Click filter Type > select Expense and save.
Click From filter.
Select a few items.
Verify selected items does not move to top of the list.
Click save
Open the same filter again.
Verify list has initial scroll position such as first selected item is visible.
Select/deselect a few items.
Verify list does not scroll on selecting/deselecting any item.
For filters To, Workspace, Card, Category, Currency, Tag and Tax Rate repeat steps 4-10.
Click filter Type > select Chat and save.
For filter In repeat steps 4-10.
Click filter Type > select Task and save.
For filter Assignee repeat steps 4-10.

Group:

Click FAB > start chat.
Select a few users using Add to group button.
Verify selected items does not move to top of the list and list does not scroll on selecting/deselecting any item.
Click Next > Start Group.
Click group header > Members > Invite members.
Select/Deselect a few members.
Verify selected member does not move to top of the list and list does not scroll on selecting/deselecting any member.

Room:

Click FAB > Start chat > Room > create a room.
Click room header > Members > Invite member.
Select/Deselect a few members.
Verify selected member does not move to top of the list and list does not scroll on selecting/deselecting any member.

Workspace: (create one if needed)

Go to Workspaces > open a workspace.
Go to Members > Invite Member.
Select/Deselect a few members.
Verify selected member does not move to top of the list and list does not scroll on selecting/deselecting any member.

IOU: (prerequisite: user has a control workspace set as the default workspace)

Click FAB > Create expense > Manual.
Enter amount and click Next.
Click Attendees.
Select/Deselect a few members.
Verify selected member does not move to top of the list and list does not scroll on selecting/deselecting any member.
Click Save.
Again open Attendees.
Verify list has initial scroll position such as first selected assignee is visible.

Onboarding:

Create a new account.
Skip Work Email step.
Select Track and budget expenses on purpose select step.
Enter First Name and Last Name, click continue.
Click Create workspace > Continue.
Search and select a few members.
Verify selected member does not move to top of the list and list does not scroll on selecting/deselecting any member.

…is rendered

…lling-and-jumping-selectionList

melvin-bot · 2025-09-02T08:18:24Z

@parasharrajat Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

parasharrajat · 2025-10-05T14:36:10Z

@ChavdaSachin Can you please merge main?

ChavdaSachin · 2025-10-05T17:03:32Z

Sure thing, I am ooo today and tomorrow, I should be able to work it out on Tuesday.

ChavdaSachin · 2025-10-13T07:11:23Z

@parasharrajat I could see there are far too many changes which could be resolved here.
And I could see another refactor issue which would keep conflicting with current issue.
I think we need to close the current PR and and hold on for refactor issue subtasks (should be merged within current week) and then raise a brand new PR.
In the mean time I could raise a PR for simpler single selection lists where getValidOptions or useSearchSelector hooks are irrelevant.
agree?

JmillsExpensify

Love the product changes happening in this PR.

parasharrajat · 2025-12-05T05:53:12Z

@ChavdaSachin Looks like the PR you tagged is merged. What is your new plan?

Stop scrolling to top when selecting an item

fd9f06c

ChavdaSachin added 3 commits July 23, 2025 20:15

Merge remote-tracking branch 'upstream/main' into fix-61414/stop-scro…

91decc1

…lling-and-jumping-selectionList

combine selected and non selected workspaces in a single section

e521fc0

combine selected and non selected items in a single section

1bf1112

ChavdaSachin force-pushed the fix-61414/stop-scrolling-and-jumping-selectionList branch from c5fb170 to 1bf1112 Compare July 23, 2025 16:35

ChavdaSachin added 9 commits August 11, 2025 21:14

Merge main

6e48532

unify selected and non-selected options

6fda289

unify selected and non-selected options

e0477ff

unify selected and non-selected options

51cc4eb

prettier

284a695

unify selected and non-selected options

0ee3e16

unify selected and non-selected options

c69c856

unify selected and non-selected options

cd6e0d7

prettier

c85ee14

ChavdaSachin added 3 commits August 28, 2025 17:35

lint/prettier

6731088

prettier

9090550

lint

a30f7c7

add initiallyFocusedOptionKey

38c4e56

ChavdaSachin added 3 commits August 28, 2025 20:09

Stop scrolling to top when selecting an item

11a6c0f

Optimization + pass initialNumToRender to prevent flicker after list …

0976439

…is rendered

Merge remote-tracking branch 'upstream/main' into fix-61414/stop-scro…

d58363b

…lling-and-jumping-selectionList

This comment was marked as resolved.

Sign in to view

Merge remote-tracking branch 'upstream/main' into fix-61414/stop-scro…

c9d5291

…lling-and-jumping-selectionList

This comment was marked as resolved.

Sign in to view

ChavdaSachin added 2 commits September 1, 2025 15:17

Merge Main

c561111

Remove flaky check and lint

e62e394

This comment was marked as resolved.

Sign in to view

ChavdaSachin added 2 commits September 2, 2025 13:29

undo unwanted changes

703528e

Prevent animation for initial scroll

d804b21

ChavdaSachin marked this pull request as ready for review September 2, 2025 08:18

ChavdaSachin requested review from a team as code owners September 2, 2025 08:18

melvin-bot bot requested review from parasharrajat and removed request for a team September 2, 2025 08:18

ChavdaSachin mentioned this pull request Sep 2, 2025

[$250] Stop scrolling and jumping when selecting items in multi-select view #61414

Open

16 tasks

JmillsExpensify reviewed Dec 4, 2025

View reviewed changes

ChavdaSachin closed this Dec 15, 2025

Stop scrolling to top when selecting an item #65449

Stop scrolling to top when selecting an item #65449

Uh oh!

Conversation

ChavdaSachin commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

ChavdaSachin commented Jul 3, 2025

Uh oh!

ChavdaSachin commented Jul 7, 2025

Uh oh!

parasharrajat commented Jul 8, 2025

Uh oh!

ChavdaSachin commented Jul 8, 2025

Uh oh!

parasharrajat commented Jul 8, 2025

Uh oh!

shawnborton commented Jul 8, 2025

Uh oh!

ChavdaSachin commented Jul 8, 2025

Uh oh!

shawnborton commented Jul 8, 2025

Uh oh!

dannymcclain commented Jul 8, 2025

Uh oh!

ChavdaSachin commented Jul 23, 2025

Uh oh!

parasharrajat commented Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ChavdaSachin commented Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

parasharrajat commented Jul 24, 2025

Uh oh!

parasharrajat commented Aug 7, 2025

Uh oh!

ChavdaSachin commented Aug 11, 2025

Uh oh!

parasharrajat commented Aug 11, 2025

Uh oh!

ChavdaSachin commented Aug 28, 2025

Uh oh!

ChavdaSachin commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

melvin-bot bot commented Sep 2, 2025

Uh oh!

parasharrajat commented Oct 5, 2025

Uh oh!

ChavdaSachin commented Oct 5, 2025

Uh oh!

ChavdaSachin commented Oct 13, 2025

Uh oh!

JmillsExpensify left a comment

Choose a reason for hiding this comment

Uh oh!

parasharrajat commented Dec 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ChavdaSachin commented Jul 3, 2025 •

edited

Loading

parasharrajat commented Jul 24, 2025 •

edited

Loading

ChavdaSachin commented Jul 24, 2025 •

edited

Loading

ChavdaSachin commented Aug 28, 2025 •

edited

Loading