JedWatson / JedWatson/react-select

Scroll position resets when loading additional data with onMenuScrollToBottom

Open
#5,941 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

Description: When using ReactSelect with the onMenuScrollToBottom feature to load additional data, the scroll position is reset to the top of the list each time new data is added. This creates a poor user experience, as users have to scroll back from the beginning instead of continuing from their current scroll position.

Expected behavior: When loading additional data, the scroll position should be maintained, allowing users to continue viewing newly added items without having to scroll back from the top of the list.

Steps to reproduce:

Use ReactSelect with onMenuScrollToBottom to load more data.
Scroll to the bottom of the list to trigger additional loading.
Observe the scroll position resetting to the top of the list when new data is added.
Screenshot 2024-08-08 at 00 01 02
Screenshot 2024-08-08 at 00 00 31
Screenshot 2024-08-08 at 00 00 12

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with ReactSelect and onMenuScrollToBottom, then trace the menu rendering and data-update behavior. Done means loading additional data preserves the current scroll position instead of returning to the top.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.