From 205078c865ffa918238df7a4ad8eb97b967a9330 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 25 Aug 2020 22:03:53 -0500
Subject: [PATCH] Chats: focus input under some circumstances

---
 .../features/chats/components/chat_window.js  | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_window.js b/app/soapbox/features/chats/components/chat_window.js
index 6c7cdf09a..3ec20837a 100644
--- a/app/soapbox/features/chats/components/chat_window.js
+++ b/app/soapbox/features/chats/components/chat_window.js
@@ -64,17 +64,31 @@ class ChatWindow extends ImmutablePureComponent {
     this.messagesEnd.scrollIntoView({ behavior: 'smooth' });
   }
 
-  setRef = (el) => this.messagesEnd = el;
+  focusInput = () => {
+    if (!this.inputElem) return;
+    this.inputElem.focus();
+  }
+
+  setMessageEndRef = (el) => this.messagesEnd = el;
+  setInputRef = (el) => this.inputElem = el;
 
   componentDidMount() {
     const { dispatch, pane, chatMessages } = this.props;
     this.scrollToBottom();
     if (chatMessages && chatMessages.count() < 1)
       dispatch(fetchChatMessages(pane.get('chat_id')));
+    if (pane.get('state') === 'open')
+      this.focusInput();
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     this.scrollToBottom();
+
+    const oldState = prevProps.pane.get('state');
+    const newState = this.props.pane.get('state');
+
+    if (oldState !== newState && newState === 'open')
+      this.focusInput();
   }
 
   render() {
@@ -105,7 +119,7 @@ class ChatWindow extends ImmutablePureComponent {
                 </span>
               </div>
             ))}
-            <div style={{ float: 'left', clear: 'both' }} ref={this.setRef} />
+            <div style={{ float: 'left', clear: 'both' }} ref={this.setMessageEndRef} />
           </div>
           <div className='pane__actions'>
             <input
@@ -114,6 +128,7 @@ class ChatWindow extends ImmutablePureComponent {
               onKeyDown={this.handleKeyDown(chat.get('id'))}
               onChange={this.handleContentChange}
               value={this.state.content}
+              ref={this.setInputRef}
             />
           </div>
         </div>