petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.16k stars 299 forks source link

[BUG] - reversed list does not stick to the bottom when new items are added #1031

Closed armana-l closed 7 months ago

armana-l commented 7 months ago

Describe the bug When new items are appended at the end of the list, scroll position starts changing even though virtuoso is set up to hold the position at the bottom. (see codesandbox example). For first few added items, scroll position holds at the bottom, but after some unspecified amount of added items, scroll position starts loosing its position.

Reproduction https://codesandbox.io/p/sandbox/mystifying-ptolemy-lfgd6g?file=%2FApp.js%3A55%2C36

To Reproduce Steps to reproduce the behavior:

  1. Wait until the list is loaded
  2. Click on Add button multiple times
  3. After few items added and list sticking to the bottom, scroll position moves up with each new appended item

Expected behavior If user does not change scroll position manually, scroll position should always stick to the bottom when new items are appended to the list.

Screenshots Screencast from 24.1.2024 09_28_02.webm

Desktop

Additional context We are using Virtuoso for our messaging app. The list is reversed there and scroll direction is from the bottom to the top. We have many odd issues happening there, like jumping, blinking, scroll going off when items list is updating (new message arrives, user sends a message or a message is deleted). I used official virtuoso example of the reversed list in order to be successful in reproducing some of the issues. I used original virtuoso code plus additional setup we have in our Virtuoso app. This bug is what I came up with and I think that resolving this issue might help us in making virtuoso work better in our app.

react 18.0.0 react-virtuoso latest

petyosi commented 7 months ago

This is not a bug in Virtuoso - your setup is broken. I'm happy to assist you further and resolve your issues if your company sponsors the project.