Items added asynchronously cause the active item to be reset

[zgreen]

My use case is an infinitely scrolling list, that loads more items as the user scrolls or arrows down. Whenever the items in the list is changed, the active index appears to be reset to zero.

Here's a simple reproduction (it doesn't actually load more on scroll, it simply loads more on an interval). If you start using the down arrow to move down the list, you'll see your position gets lost as new items are concatenated onto the end of the list.

https://codesandbox.io/s/nifty-wood-4u4cnx?file=/src/App.tsx

This is less of an issue when scrolling with the mouse, because the pointer sets a new active item on whatever it hovers over. So the primary thing I'm hoping to solve is preserving the active item when using arrow keys.

Thanks very much for this library! If you need a PR, I may be able to contribute—I recognize this might be non-trivial.

[deshiknaves]

Facing similar issues when using virtualization. Because the elements are dynamically added, the focused element goes back to the start.

[stmchan93]

I've also noticed that even hovering over an element with virtualization is very laggy, which can also affect the overall UX of using this component with virtualization.