mason-rogers
commented
2 years ago Hi, I have a project which is experiencing this issue too. Though in this instance, I can only seem to consistently produce it after a fresh load, it doesn't seem to happen for consecutive list updates (though in some instances, it does happen multiple times before refreshing)
Here's the code snippet for where react-virtualisation is used to display a list of items (messages in our case) https://github.com/widgetbot-io/embed/blob/c50ec370c6186fc755c6354d59b2cb3208d39835/src/views/Messages/Messages.tsx#L74-L158
In this example there's a few rename components:
<MessageList> is <AutoSizer>
<Scroller> is <List>
They're the same but wrapped through styled - though changing this to not use styled does not seem to fix the issue.
I've also attached a video of the issue too. https://user-images.githubusercontent.com/26467584/165979216-39b24b28-4342-4ab6-9c29-496e3ff8b0a3.mp4
Bug Report
https://codesandbox.io/s/scrollbar-jumping-6oy0kz
What is the current behavior?
In this demo project, new items are added to the list every 2 seconds. If you scoll to some item and watching the list grow you will actually see the scrollbar jump around and list items disappear from the list.
What is the expected behavior?
The scrollbar should not move at all.
Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?
See repo.