diff --git a/package.json b/package.json
index eccf368ec..c98d55086 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
"react-markdown": "^4.3.1",
"react-player": "^2.6.2",
"react-textarea-autosize": "^8.2.0",
- "react-virtuoso": "0.20.0",
+ "react-virtuoso": "^0.20.1",
"seamless-immutable": "^7.1.4",
"textarea-caret": "^3.1.0",
"uuid": "^8.3.1"
diff --git a/src/components/MessageList/VirtualizedMessageList.js b/src/components/MessageList/VirtualizedMessageList.js
index 3f283aa0d..250f0a247 100644
--- a/src/components/MessageList/VirtualizedMessageList.js
+++ b/src/components/MessageList/VirtualizedMessageList.js
@@ -64,11 +64,8 @@ const VirtualizedMessageList = ({
/* do nothing if new messages are loaded from top(loadMore) */
if (lastMessage.id === prevMessageId) return;
- /* if list is already at the bottom make it sticky */
- if (atBottom.current) {
- setTimeout(() => virtuoso.current?.scrollToIndex(messages.length)); // setTimeout is needed to delay the scroll until react flushes
- return;
- }
+ /* if list is already at the bottom return, followOutput will do the job */
+ if (atBottom.current) return;
/* if the new message belongs to current user scroll to bottom */
if (lastMessage.user?.id === client.userID) {
@@ -127,20 +124,23 @@ const VirtualizedMessageList = ({
ref={virtuoso}
totalCount={messages.length}
overscan={overscan}
+ followOutput={true}
maxHeightCacheSize={2000} // reset the cache once it reaches 2k
scrollSeek={scrollSeekPlaceHolder}
item={(i) => messageRenderer(messages, i)}
emptyComponent={() =>