ScrollToIndex doesn't scroll to bottom of the list

[DoneDeal0]

When using scrollToIndex on a chat list (when adding a new message for exemple, the list scrolls down, but fails to reach the bottom. It seems to be because of the margin between each elements. Also, if I'm already at the bottom of the list, scrollToIndex makes the list scroll up a little bit instead of staying immobile. How to fix this?

Here is a simple sandbox with the reproduction of the issue: https://codesandbox.io/s/competent-cookies-hdur6?file=/src/Chat.tsx

Thanks for your help! Great library!

[petyosi]

@DoneDeal0 I believe that the followOutput prop is meant to do exactly what you are trying to achieve. Check the modification of your sandbox.

On a side note, I am working on the next version of the library, which includes followOutput="smooth". I will post an update here with an example once it is done.

[petyosi]

Here's how it looks with a smooth followOutput. Notice that you don't need to deal with refs or call scrollToIndex. I am also introducing the data property.

Let me know what you think about that behavior please.

[DoneDeal0]

Hi @petyosi , thanks for your answer! Your smooth followOutput is really great, it will be an important feature of React Virtuoso. When do you plan to release this alpha version?

However, it only works if the user is already at the bottom of the page. Typically, a chat app should offer the possibility to scroll down to the bottom anytime by clicking on a button ("you've got new messages", or by simply posting a new message). This is why I've used the scrollToIndex method.

But the issue I've described above remains. The scroll to last index is incomplete. So I think a relevant addition to this smooth followOutput would be to add a scrollToBottom eventListener to trigger it anytime (or fix the scrollToIndex).

Also, why did you used _groupBy in the row parameter?

Thank you so much!

[petyosi]

To answer your questions:

1. When will this be released: I am working through the issues which the new release will address while building new docs. Plenty of features, but my guesstimate is a RC state ~2 weeks from now. Unless I discover a blocker, of course.

2. Agreed on the scrollToBottom feature. I think it works well with the new version - check an updated sandbox. If something does not work on your side, I might be missing something. Can you help further?

3. In the next release, the signature of the item prop (which is renamed to itemContent) is the following: (index: number, groupIndex: number?, data: any). Since the flat and grouped component share the same implementation, the second param is somewhat bogus in flat mode. Still thinking about how to solve it.

[DoneDeal0]

1- Thanks, I'm eager to use it :)!

2- It works very well, but I'd suggest to add a smooth scrolling to bottom option as well. Another suggestion would be to allow a callback to subscribe to list change. It's easy to do it by ourselves, but your library shines in chat app because it allows various row heights. Therefore, such an ability would make a lot of sense for Virtuoso.

3- I would suggest to pass groupIndex as a third optional parameter, so a user with a flat list would benefit from a shorter syntax.

Thanks for your great work!

[petyosi]

Thanks for the suggestion on point 3.

re 2: The scrollToIndex method supports smooth scrolling.

          ref.current!.scrollToIndex({
            index: messages.length - 1,
            behavior: "smooth"
          })

Added that to the example.

[DoneDeal0]

It's perfect, thanks! Please let me know when 0.21 is available.

[gajus]

It would be nice if scrollToIndex supported a constant for scrolling to the bottom, e.g. {scrollToIndex: -1}.

This is because in heavily memoized env it might not be easy to access reference to messages.