From ef110e6fe2290abbc0ea5411365e3c168dbbb5c0 Mon Sep 17 00:00:00 2001
From: Jerko Steiner <jerko.steiner@gmail.com>
Date: Sun, 17 Nov 2019 09:34:02 -0300
Subject: [PATCH] Autofocus chat input

---
 src/client/components/Chat.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/client/components/Chat.tsx b/src/client/components/Chat.tsx
index ab368d8..419b259 100644
--- a/src/client/components/Chat.tsx
+++ b/src/client/components/Chat.tsx
@@ -29,6 +29,7 @@ export interface ChatProps {
 
 export default class Chat extends React.PureComponent<ChatProps> {
   chatHistoryRef = React.createRef<HTMLDivElement>()
+  inputRef = React.createRef<Input>()
 
   scrollToBottom = () => {
     const chatHistoryRef = this.chatHistoryRef.current!
@@ -36,9 +37,16 @@ export default class Chat extends React.PureComponent<ChatProps> {
   }
   componentDidMount () {
     this.scrollToBottom()
+    this.focus()
   }
   componentDidUpdate () {
     this.scrollToBottom()
+    this.focus()
+  }
+  focus() {
+    if (this.props.visible) {
+      this.inputRef.current?.textArea.current?.focus()
+    }
   }
   render () {
     const { messages, sendMessage } = this.props
@@ -103,7 +111,7 @@ export default class Chat extends React.PureComponent<ChatProps> {
 
         </div>
 
-        <Input sendMessage={sendMessage} />
+        <Input ref={this.inputRef} sendMessage={sendMessage} />
       </div>
     )
   }