From 5fe36f37bd4757b77e98de6f51d5f26f3162b863 Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Thu, 3 Dec 2020 22:43:31 -0800
Subject: [PATCH] fix for #411

---
 webroot/js/components/chat/chat.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/webroot/js/components/chat/chat.js b/webroot/js/components/chat/chat.js
index 467b04129..f88f39849 100644
--- a/webroot/js/components/chat/chat.js
+++ b/webroot/js/components/chat/chat.js
@@ -24,6 +24,7 @@ export default class Chat extends Component {
     this.scrollableMessagesContainer = createRef();
 
     this.websocket = null;
+    this.receivedFirstMessages = false;
 
     this.getChatHistory = this.getChatHistory.bind(this);
     this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this);
@@ -181,8 +182,8 @@ export default class Chat extends Component {
   checkShouldScroll() {
     const { scrollTop, scrollHeight, clientHeight } = this.scrollableMessagesContainer.current;
     const fullyScrolled = scrollHeight - clientHeight;
-    const shoudlScroll = scrollHeight >= clientHeight && fullyScrolled - scrollTop < MESSAGE_JUMPTOBOTTOM_BUFFER;
-    return shoudlScroll;
+    const shouldScroll = scrollHeight >= clientHeight && fullyScrolled - scrollTop < MESSAGE_JUMPTOBOTTOM_BUFFER;
+    return shouldScroll;
   }
 
   handleWindowResize() {
@@ -195,8 +196,13 @@ export default class Chat extends Component {
     if (numMutations) {
       const item = mutations[numMutations - 1];
       if (item.type === 'childList' && item.addedNodes.length) {
-        if (this.newMessagesReceived || this.checkShouldScroll()) {
-          this.scrollToBottom();
+        if (this.newMessagesReceived) {
+          if (!this.receivedFirstMessages) {
+            this.scrollToBottom();
+            this.receivedFirstMessages = true;
+          } else if (this.checkShouldScroll()) {
+            this.scrollToBottom();
+          }
           this.newMessagesReceived = false;
         }
       }