From dcaadb2153e4d6b734b2b352c0a3b14ca5807965 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 25 Aug 2020 21:45:05 -0500
Subject: [PATCH] Chats: autoscroll https://stackoverflow.com/a/41700815

---
 .../features/chats/components/chat_window.js        | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/app/soapbox/features/chats/components/chat_window.js b/app/soapbox/features/chats/components/chat_window.js
index 072aa0f5c..6c7cdf09a 100644
--- a/app/soapbox/features/chats/components/chat_window.js
+++ b/app/soapbox/features/chats/components/chat_window.js
@@ -59,12 +59,24 @@ class ChatWindow extends ImmutablePureComponent {
     this.setState({ content: e.target.value });
   }
 
+  scrollToBottom = () => {
+    if (!this.messagesEnd) return;
+    this.messagesEnd.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  setRef = (el) => this.messagesEnd = el;
+
   componentDidMount() {
     const { dispatch, pane, chatMessages } = this.props;
+    this.scrollToBottom();
     if (chatMessages && chatMessages.count() < 1)
       dispatch(fetchChatMessages(pane.get('chat_id')));
   }
 
+  componentDidUpdate() {
+    this.scrollToBottom();
+  }
+
   render() {
     const { pane, idx, chatMessages } = this.props;
     const chat = pane.get('chat');
@@ -93,6 +105,7 @@ class ChatWindow extends ImmutablePureComponent {
                 </span>
               </div>
             ))}
+            <div style={{ float: 'left', clear: 'both' }} ref={this.setRef} />
           </div>
           <div className='pane__actions'>
             <input