Skip to content

fix: preserve scroll position in multi-select on option toggle#143

Open
govindarajug wants to merge 1 commit into
jacobworrel:masterfrom
govindarajug:fix/preserve-scroll-position-on-select
Open

fix: preserve scroll position in multi-select on option toggle#143
govindarajug wants to merge 1 commit into
jacobworrel:masterfrom
govindarajug:fix/preserve-scroll-position-on-select

Conversation

@govindarajug

@govindarajug govindarajug commented Apr 12, 2026

Copy link
Copy Markdown

Summary

When selecting or deselecting options in a multi-select dropdown, the menu list jumps back to the top. This is a long-standing issue that makes multi-select unusable when working with large option lists.

Root cause: The useEffect in MenuList that handles scroll behavior unconditionally calls list.current.scrollToItem(currentIndex) whenever children changes. In multi-select mode, every option toggle triggers a children re-render, resetting the scroll to the focused item (often index 0).

Fix:

  • Track the current scroll offset via a ref, updated through react-window's onScroll callback
  • On re-render in multi-select mode, restore the saved scroll position instead of scrolling to currentIndex
  • Single-select keyboard navigation behavior is preserved unchanged

Changes

  • Added scrollOffsetRef to track scroll position via List's onScroll prop
  • Modified the scroll restoration useEffect to check isMulti — if true and a scroll offset exists, restore it; otherwise fall back to the existing scrollToItem behavior

Test plan

  • TypeScript compiles cleanly (tsc --noEmit --skipLibCheck)
  • Open a multi-select with 100+ options, scroll down, select an option — menu should stay at the same scroll position
  • Open a multi-select, scroll down, deselect an option — menu should stay at the same scroll position
  • Open a single-select, use keyboard arrows to navigate — should scroll to focused item as before
  • Open a multi-select with grouped options — scroll persistence should work the same

Fixes #72, #106, #142

When selecting or deselecting options in a multi-select dropdown, the
menu list would jump back to the top. This happened because the
children-change effect unconditionally called scrollToItem(currentIndex),
resetting the scroll position on every re-render.

This fix tracks the current scroll offset via a ref (updated through
react-window's onScroll callback) and restores it after re-render in
multi-select mode, while preserving the existing keyboard-navigation
scroll behavior for single-select.

Fixes jacobworrel#72, jacobworrel#106, jacobworrel#142
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Multi Select picker jumps to the top after selection.

1 participant