From 58f2d0981597c951b0883b2c7b2c563c0ce5d000 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 12 Jun 2023 15:44:11 -0700
Subject: [PATCH] fix(chat): try to improve auto scroll to bottom. Closes #3029

---
 .../chat/ChatContainer/ChatContainer.tsx         | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index ea6460b3f..e347da947 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -205,16 +205,14 @@ export const ChatContainer: FC<ChatContainerProps> = ({
     }
   };
 
-  const scrollChatToBottom = (ref, behavior = 'smooth') => {
+  const scrollChatToBottom = ref => {
     clearTimeout(scrollToBottomDelay.current);
     scrollToBottomDelay.current = setTimeout(() => {
-      ref.current?.scrollToIndex({
-        index: messages.length - 1,
-        behavior,
-      });
+      ref.current?.scrollTo({ top: Infinity, left: 0, behavior: 'auto' });
+
       setIsAtBottom(true);
-      setShowScrollToBottomButton(false);
     }, 150);
+    setShowScrollToBottomButton(false);
   };
 
   // This is a hack to force a scroll to the very bottom of the chat messages
@@ -222,7 +220,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   // For https://github.com/owncast/owncast/issues/2500
   useEffect(() => {
     setTimeout(() => {
-      scrollChatToBottom(chatContainerRef, 'auto');
+      scrollChatToBottom(chatContainerRef);
     }, 500);
   }, []);
 
@@ -240,7 +238,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
           followOutput={() => {
             if (isAtBottom) {
               setShowScrollToBottomButton(false);
-              scrollChatToBottom(chatContainerRef, 'auto');
+              scrollChatToBottom(chatContainerRef);
               return 'smooth';
             }
 
@@ -261,7 +259,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
         {showScrollToBottomButton && (
           <ScrollToBotBtn
             onClick={() => {
-              scrollChatToBottom(chatContainerRef, 'auto');
+              scrollChatToBottom(chatContainerRef);
             }}
           />
         )}