chat-ui-kit-react: scrollbar stays at the top when infinite scrolling

hey, thanks for the great package!

i’m using infinite scrolling on the MessageList component like this:

 <MessageList
  onYReachStart={loadMore}
  loadingMore={networkStatus === NetworkStatus.fetchMore}
 >

but when more messages are loaded, the scrollbar is still at the top of the container so it just keeps calling loadMore over and over. ideally the behaviour would be something like this:

before onYReachStart is called:

message4 <-----scroll to here
message5
message6

after onYReachStart is called:

message1
message2
message3
message4 <-----scroll bar is here
message5
message6

so that only the next page of messages is fetched, rather than continually fetching more pages until you manually scroll down. hope that makes sense!

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 1
Comments: 25 (10 by maintainers)

Most upvoted comments

@yevhen-logosha I have probably found what causes this behavior.

From what I have found the main problem is that onYReachEnd is fired on the first <MessageList /> render even when the content is smaller than component height and there is no scrollbar at all. This is caused by calling updateScroll method of ReactPerfectScrollbar in the ResizeObserver callback. This callback is fired the first time when a watched element is inserted into the DOM (The documentation says: “Observation will fire when watched Element is inserted/removed from DOM.”).

Now I need to find a way to prevent the updateScroll method from firing when the element is inserted. I need so time to make a fix. Probably tomorrow will try to deal with this, so please be patient it will definitely be fixed.

One more thing: onYReachEnd is fired three times in your repro because the Modal renders its own content three times.

supersnager on Apr 15, 2021