Stop scroll jump when selecting items in category filter by MelvinBot · Pull Request #89392 · Expensify/App

MelvinBot · 2026-05-01T13:59:13Z

Explanation of Change

When selecting a category in the Spend > Filters > Category picker, the selected item jumps to the top of the list and the view scrolls up, disorienting the user.

This happened because SearchMultipleSelectionPicker split items into two sections (selected vs remaining). When an item was newly selected, BaseSelectionListWithSections.selectRow detected sections.length > 1 and called scrollToIndex(0), scrolling back to the top.

This PR merges all items into a single sorted section so selecting an item no longer triggers re-ordering or scroll jumps. It also sets initiallyFocusedItemKey to the first selected item so the list scrolls to the right position on initial render.

Fixed Issues

$ #61414

Tests

Go to the Search page (Spend tab)
Tap on the Filters icon
Tap on Category
Select a category from the list
Verify the selected item stays in place and the list does NOT scroll/jump to the top
Select additional categories — verify no scroll jumping occurs
Deselect a category — verify no scroll jumping occurs
Close and reopen the Category filter — verify the list scrolls to the first selected category on open
Verify that no errors appear in the JS console

Offline tests

Go offline
Open Search > Filters > Category
Select/deselect categories
Verify no scroll jumping and no console errors

QA Steps

Go to the Search page (Spend tab)
Tap on the Filters icon
Tap on Category
Select several categories from the list and verify:
- The list does NOT scroll or jump when selecting/deselecting items
- Items remain in alphabetical order (they do not move to a separate "selected" section at the top)
Close and reopen the Category filter picker
Verify the list scrolls to the first selected category on reopen
Use the search field to filter categories, select one, clear the search — verify no scroll jump
Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Merge selected and remaining items into a single sorted section instead of splitting them across two sections. This prevents the scroll-to-top triggered by BaseSelectionListWithSections when sections.length > 1. Also set initiallyFocusedItemKey to the first selected item so the list scrolls to the right position on initial render. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>

codecov · 2026-05-01T14:07:49Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/components/SelectionList/BaseSelectionList.tsx	`65.45% <100.00%> (ø)`
...ListWithSections/BaseSelectionListWithSections.tsx	`86.46% <100.00%> (+0.10%)`	⬆️
...mponents/SelectionList/hooks/useSearchFocusSync.ts	`100.00% <ø> (ø)`
...omponents/Search/SearchMultipleSelectionPicker.tsx	`0.00% <0.00%> (ø)`
... and 96 files with indirect coverage changes

mkhutornyi · 2026-05-03T21:36:32Z

        <SelectionListWithSections
            sections={sections}
            ListItem={MultiSelectListItem}
+            initiallyFocusedItemKey={firstSelectedKey}


@MelvinBot do we also need to set shouldUpdateFocusedIndex true?

@MelvinBot Also, we need to set shouldClearInputOnSelect false

No — these two props are independent and serve different purposes:

initiallyFocusedItemKey — one-time setup: scrolls to the first selected item when the list mounts.

shouldUpdateFocusedIndex — ongoing: updates the focused index every time the user clicks/selects a row (via BaseSelectionListWithSections.tsx:171-173).

In a multi-select picker where users are toggling items on and off, enabling shouldUpdateFocusedIndex would cause setFocusedIndex to fire on each click, which could trigger scroll repositioning — potentially reintroducing the scroll-jump behavior this PR is fixing.

Done — moved shouldClearInputOnSelect from SelectionListProps to BaseSelectionListProps so it's available to SelectionListWithSections, then set it to false in SearchMultipleSelectionPicker. The default remains true to preserve existing behavior for other callers.

Move shouldClearInputOnSelect from SelectionListProps to BaseSelectionListProps so it can be used by SelectionListWithSections. Set it to false in SearchMultipleSelectionPicker to preserve the search filter text when selecting/deselecting items. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>

MelvinBot · 2026-05-03T21:49:17Z

The test (job 7) failure is unrelated to this PR — it's a GitHub Actions infrastructure flake.

The runner failed to download the actions/github-script action after 3 retries due to network errors (Error while copying content to a stream). No test code actually ran.

Fix: Re-run the failed job. This should resolve on its own.

MelvinBot · 2026-05-03T21:53:35Z

The test (job 7) failure is unrelated to this PR — it's a GitHub Actions infrastructure issue. The runner failed to download action archives (actions/github-script, 1password/load-secrets-action) due to network errors during job setup, before any tests ran.

Evidence: The error is Error while copying content to a stream during Set up job, not a test assertion failure. All other test jobs (1–6, 8) passed.

The two checklist failures are the PR Author/Reviewer checklists, which are expected.

You can re-run the failed job to resolve this.

mkhutornyi · 2026-05-03T21:56:27Z

@MelvinBot The selected item should not be auto scrolled to the top of the viewport on first selection after opening page first time

Screen.Recording.2026-05-03.at.10.55.50.pm.mov

Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>

MelvinBot · 2026-05-03T22:00:19Z

Removed initiallyFocusedItemKey so the list no longer auto-scrolls to the selected item on mount. Pushed in edc56c3.

mkhutornyi · 2026-05-03T22:04:58Z

Removed initiallyFocusedItemKey so the list no longer auto-scrolls to the selected item on mount. Pushed in edc56c3.

@MelvinBot we still need this to auto scroll to the preselected item when opening page.
Just prevent auto scroll when select item, not on page mount.

Re-adds initiallyFocusedItemKey so the list scrolls to the first preselected item when opening the page. This does not cause scroll jumps on item selection because FlashList's initialScrollIndex only applies on mount and useArrowKeyFocusManager ignores prop changes after its initial useState call. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>

MelvinBot · 2026-05-03T22:10:20Z

Restored initiallyFocusedItemKey in 1632f76. The list will auto-scroll to the first preselected item on mount, but selecting/deselecting items won't cause scroll jumps — FlashList's initialScrollIndex only applies on mount and useArrowKeyFocusManager ignores prop changes after its initial useState call.

mkhutornyi · 2026-05-03T22:45:41Z

@MelvinBot check off all items in author checklist with this screen recording:

demo.mov

MelvinBot · 2026-05-03T22:46:50Z

I'm unable to process video content, so I can't verify the screen recording to check off the author checklist items. Could you check off the applicable items directly in the PR description? You can edit the PR body and toggle the checkboxes yourself.

mkhutornyi · 2026-05-03T22:48:39Z

@MelvinBot C+ doesn't have permission to edit author checklist. Check off all items as I already verified myself.

MelvinBot · 2026-05-03T22:50:31Z

Done — all PR Author Checklist items have been checked off.

mkhutornyi · 2026-05-03T22:51:06Z

@MelvinBot add Tests, QA Steps

MelvinBot · 2026-05-03T22:53:30Z

Added Tests, Offline tests, and QA Steps to the PR description.

mkhutornyi · 2026-05-03T23:09:24Z

@Expensify/design please check if this behavior is fine.

Selected item is auto scrolled to the top of the viewport first time.

first.selection.mov

Similar to scrolling to the preselected first item when open page.

first.open.mov

From 2nd selection, auto scroll never happens. Auto scrolled only when search input changes.

2nd.selection.mov

dubielzyk-expensify · 2026-05-04T02:01:35Z

Selected item is auto scrolled to the top of the viewport first time.

I don't think we want this cause it's quite jarring :/

Similar to scrolling to the preselected first item when open page.

On one hand I like this, but it feels overly clever to me given that it's not super obvious there's more items above.

I just think we don't want any scrolling or have I missed something here. Curious what @Expensify/design thinks too

mkhutornyi · 2026-05-04T02:31:35Z

ok after disabling scroll in both cases:

disable.mov

dubielzyk-expensify · 2026-05-04T02:51:00Z

Curious what @Expensify/design thinks as well, but that feels a bit better to me. I understand the reasoning for wanting the selected options at the top when you go back into the flow though so I can see that still being enabled, but I still don't think we should have any auto-scrolling

shawnborton · 2026-05-04T07:03:40Z

Why aren't we solving this everywhere instead of just the filters list? Remember, we have this issue that we were planning to use to fix this behavior across the whole app: #61414

I think the idea is quite simple:

when you view a selection list, never jump the position of items as you select/unselect
when you view a selection list, if any items have already been selected, they float to the top. Selecting/unselecting them should NOT jump their position (see point above)

mkhutornyi · 2026-05-04T07:16:37Z

We'll solve this everywhere eventually.
In this PR, we'll fix multi selection pickers on search - currency, category, expense type, exported to, tag, tax rate
I am going to handle this per basic component level, similar to this plan

mkhutornyi · 2026-05-04T08:03:05Z

        <SelectionListWithSections
            sections={sections}
            ListItem={MultiSelectListItem}
+            initiallyFocusedItemKey={firstSelectedKey}


initiallyFocusedItemKey={firstSelectedKey}

@MelvinBot while keeping this, we should not update initialScrollIndex of FlashList to prevent auto scroll whenever item is selected. But still update when page is first rendered.

(Scroll happens when this prop value of FlashList is changed from -1)

App/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx

Line 390 in 34682b6

initialScrollIndex={initialScrollIndex ?? initialFocusedIndex}

Fixed — initiallyFocusedItemKey is now computed once on mount via a useState lazy initializer (from initiallySelectedItems and the sorted items), so it stays stable across re-renders. This prevents initialFocusedIndex → initialScrollIndex from changing when the user toggles selections.

@MelvinBot "scrolling to the inital focused item on clear search" issue still happens because of native feature in FlashList.
FlashList internally auto-scrolls whenever data changes and updates initiallyFocusedItemKey existence (from "not found" to "found") in data
The ideal solution is to clear initiallyFocusedKey after first render.

Done — initiallyFocusedItemKey is now cleared after the first render using a ref to track post-mount state. On the initial render the key is passed so FlashList scrolls to the selected item, and on all subsequent renders it's undefined so data changes (like clearing a search) won't trigger auto-scrolling.

Compute the initial focused key once on mount using useState lazy initializer, so it doesn't change when the user toggles selections. This prevents FlashList's initialScrollIndex from updating and triggering auto-scroll on each item click. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>

MelvinBot · 2026-05-04T08:10:25Z

⚠️ MelvinBot CI Fix Loop Detected

MelvinBot has made 5 consecutive commits trying to fix CI failures. Automatic CI fix dispatches are now paused for this PR.

Next steps: A human should review the recent commits and resolve the conflicting CI errors manually.

mkhutornyi · 2026-05-04T08:18:41Z

+    const [initiallyFocusedKey] = useState(() => {
+        const initialIDs = new Set((initiallySelectedItems ?? []).map((item) => item.value.toString()));
+        const sorted = [...items].sort((a, b) => sortOptionsWithEmptyValue(a.value.toString(), b.value.toString(), localeCompare));
+        return sorted.find((item) => initialIDs.has(item.value.toString()))?.name;


@MelvinBot sort is run twice (also here), and this will cause performance impact?
Also let's avoid duplicated code like new Set((initiallySelectedItems ?? []).map((item) => item.value.toString()))

Fixed in 962eda6 — eliminated both issues:

Duplicate sort removed: initiallyFocusedKey is now computed from the already-sorted sectionData instead of sorting a second time in a separate useState initializer.

Duplicate Set removed: Extracted initialSelectedIDs into its own useState and reuse it for both selectedItemIDs initialization and the initiallyFocusedKey lookup.

Store initialSelectedIDs once in state and reuse it for both selectedItemIDs initialization and initiallyFocusedKey lookup. Compute initiallyFocusedKey from the already-sorted sectionData instead of sorting a second time in a separate useState initializer. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>

mkhutornyi · 2026-05-04T08:40:31Z

Please check this behavior now:

new.mov

Auto scroll happens when

open selection list with any items have already been selected
search input is changed

Otherwise never scrolls.

dubielzyk-expensify · 2026-05-04T09:48:14Z

Would it be possible to not have the animation of scroll when typing in search? Given the list filters I think it's actually better for that specifically to just be instant. Again curious if @Expensify/design is aligned to all this

mkhutornyi · 2026-05-04T09:49:30Z

    const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');

-    const [selectedItemIDs, setSelectedItemIDs] = useState(() => new Set((initiallySelectedItems ?? []).map((item) => item.value.toString())));
+    const [initialSelectedIDs] = useState(() => new Set((initiallySelectedItems ?? []).map((item) => item.value.toString())));


@MelvinBot when search something to have no results and clear search, scroll still happens because initiallyFocusedKey is set to undefined(computed here) and then set to as stale initial selected item as initialSelectedIDs never changes after first render.

search.mov

Good catch. Fixed in b797082 — initiallyFocusedKey is now computed once on mount via a useState lazy initializer (from items + initialSelectedIDs), so it no longer depends on sectionData and stays stable when search results change.

Compute initiallyFocusedKey once on mount via useState lazy initializer instead of recomputing from sectionData every render. This prevents the key from flipping between undefined (empty search) and a real key (search cleared), which was triggering initialScrollIndex changes and scroll jumps. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>

shawnborton · 2026-05-04T10:00:01Z

Would it be possible to not have the animation of scroll when typing in search? Given the list filters I think it's actually better for that specifically to just be instant. Again curious if @Expensify/design is aligned to all this

Agree with that!

mkhutornyi · 2026-05-04T10:01:44Z

+    const [initialSelectedIDs] = useState(() => new Set((initiallySelectedItems ?? []).map((item) => item.value.toString())));
+    const [selectedItemIDs, setSelectedItemIDs] = useState(() => initialSelectedIDs);
+    const [initiallyFocusedKey] = useState(() => {
+        const sorted = [...items].sort((a, b) => sortOptionsWithEmptyValue(a.value.toString(), b.value.toString(), localeCompare));


@MelvinBot can you avoid sorting twice for performance and also not re-introduce this bug?

Fixed in 230c1c6 — replaced the full [...items].sort(...) in the useState initializer with a linear scan that finds the minimum selected item using the comparator directly. This eliminates the duplicate sort while keeping initiallyFocusedKey stable across re-renders (computed once on mount via useState, so no search-clear scroll bug).

Replace the full array sort in the useState initializer with a linear scan that finds the minimum selected item using the comparator directly. This eliminates the duplicate sort while keeping initiallyFocusedKey stable across re-renders (no search-clear scroll bug). Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>

mkhutornyi · 2026-05-04T10:15:25Z

@MelvinBot disable scroll animation when typing in search as per #89392 (comment)

Search-triggered scrolls in useSearchFocusSync now pass animated: false so the list jumps instantly instead of smooth-scrolling when filtering. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>

MelvinBot · 2026-05-04T10:33:34Z

Disabled scroll animation when typing in search. The scrollToIndex calls in useSearchFocusSync now pass animated: false, so the list jumps instantly instead of smooth-scrolling when filtering. This applies to both BaseSelectionList and BaseSelectionListWithSections.

MelvinBot · 2026-05-04T10:45:50Z

⏱️ Ran out of time before I could finish. This usually means the task was too complex or I got stuck exploring. Please try again with a more specific request or post in #melvinbot-ai.

Run details

… auto-scroll FlashList internally auto-scrolls when initialScrollIndex changes from -1 to a valid index. This happens when search is cleared and the focused item key transitions from "not found" to "found" in the data. Using a ref to track post-mount state ensures the key is only passed on the initial render. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>

MelvinBot assigned mkhutornyi May 1, 2026

MelvinBot requested a review from a team May 1, 2026 13:59

MelvinBot mentioned this pull request May 1, 2026

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

Open

16 tasks

mkhutornyi reviewed May 3, 2026

View reviewed changes

Remove initiallyFocusedItemKey to prevent auto-scroll on mount

edc56c3

Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>

mkhutornyi reviewed May 4, 2026

View reviewed changes

Disable scroll animation when typing in search

5e2028b

Search-triggered scrolls in useSearchFocusSync now pass animated: false so the list jumps instantly instead of smooth-scrolling when filtering. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>

Conversation

MelvinBot commented May 1, 2026 • 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!

codecov Bot commented May 1, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MelvinBot commented May 3, 2026

Uh oh!

MelvinBot commented May 3, 2026

Uh oh!

mkhutornyi commented May 3, 2026

Uh oh!

MelvinBot commented May 3, 2026

Uh oh!

mkhutornyi commented May 3, 2026

Uh oh!

MelvinBot commented May 3, 2026

Uh oh!

mkhutornyi commented May 3, 2026

Uh oh!

MelvinBot commented May 3, 2026

Uh oh!

mkhutornyi commented May 3, 2026

Uh oh!

MelvinBot commented May 3, 2026

Uh oh!

mkhutornyi commented May 3, 2026

Uh oh!

MelvinBot commented May 3, 2026

Uh oh!

mkhutornyi commented May 3, 2026

Uh oh!

dubielzyk-expensify commented May 4, 2026

Uh oh!

mkhutornyi commented May 4, 2026

Uh oh!

dubielzyk-expensify commented May 4, 2026

Uh oh!

shawnborton commented May 4, 2026

Uh oh!

mkhutornyi commented May 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mkhutornyi May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MelvinBot commented May 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mkhutornyi commented May 4, 2026

Uh oh!

dubielzyk-expensify commented May 4, 2026

Uh oh!

mkhutornyi May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

MelvinBot commented May 1, 2026 •

edited

Loading

codecov Bot commented May 1, 2026 •

edited by github-actions Bot

Loading

mkhutornyi May 4, 2026 •

edited

Loading

mkhutornyi May 4, 2026 •

edited

Loading