Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select - Odd autoscroll behavior in Select

See original GitHub issue

Expected Behavior

When onMore occurs and adds items to options the user’s cursor should remain at the item index in the list on which they currently have focus.

Actual Behavior

An unexpected autoscroll occurs after an initial onMore is called, more data is loaded, and then the user moves their cursor. I will create a minimal code example which reproduces this experience and add it to this issue.

These are the steps which trigger the scroll behavior shown in the video below:

Open modal containing a Select input.
Click on Select dropdown to reveal the first set of options. options is initially populated with a list of 50 items.
Scroll down through the options to approximately the 75% point in the scrollbar to trigger the onMore call. onMore triggers a call to the API, retrieving the next 50 items adding them to options. Note: I did replicate the same behavior with an array, taking the next slice to remove the API call from the possible variables.
Stop scrolling. (in the video, the cursor is on the cursor is on “Hawaii” when this occurs at ~00:08).
Note: The height of the scroll control reduces as the next 50 items are provided as options at 00:09.
All is fine as long as the cursor remains on the currently active item (e.g. “Hawaii”).
However, as soon as the cursor moves onto another item (00:12), which would become the next active index, the unexpected autoscroll occurs, skipping about 40 items and resolving at an item called “athena-f-2004200” at 00:14.

https://user-images.githubusercontent.com/1756948/179840901-03d32e29-2e37-458b-8d74-6d50458b1840.mov