search

GetStream / stream-chat-react

React Chat SDK ➜ Stream Chat 💬
https://getstream.io/chat/sdk/react/
Other
702 stars 273 forks source link

scroll does not stick to bottom on message height change. #603

Closed ZNackasha closed 3 years ago

ZNackasha commented 3 years ago

VirtualizedMessageList does not seem to stick to the bottom when the message height is changed. In our situation users can add emoji as reactions to messages. when this is done we simply display the emoji reaction at the bottom of the message. This causes the message height to increase. this causes the react-virtuoso to lose track of isAtBottom. this is because followOutput breaks when a item is resized. 

followOutput?: boolean

If set to true, the list will automatically scroll to bottom if the total count is changed. See the Stick to Bottom scenario for a working example.

gz#7172

shodgetts commented 3 years ago

Agent comment from Stephen Hodgetts in Zendesk ticket #7172:

Thanks for the bug report. We're already aware of this one and are working on a fix. Thank you.

shodgetts commented 3 years ago

Agent comment from Stephen Hodgetts in Zendesk ticket #7172:

You'll need to fix the height of messages otherwise no way to fix this scroll issues.

Images needs to be fixed height with a placeholder, you can check our FixedHeightMessage component on how it uses Gallery component

ath92 commented 3 years ago

Hi @ZNackasha, Stephen's comment here is correct for current versions of our library, but we have been working on a fix for this. There is a beta release (3.5.3-beta.0) in which changes to the Message Component height should not cause the "stick to bottom" to break. Can you check if that release works for you?

DanC5 commented 3 years ago

@ZNackasha We just merged an update to the Virtuoso library that fixes this issue. We'll make a new release either tomorrow or Friday, thanks for your patience.

https://github.com/GetStream/stream-chat-react/pull/694