From e1490f1081cc68274766c3b99a28c6ec056f4223 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Wed, 31 Aug 2022 12:07:25 +0300
Subject: [PATCH] automatically focus the message input when the user selects
 another channel

---
 frontend/src/components/MessageInput.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/MessageInput.svelte b/frontend/src/components/MessageInput.svelte
index cfbda7f..e03bb7a 100644
--- a/frontend/src/components/MessageInput.svelte
+++ b/frontend/src/components/MessageInput.svelte
@@ -1,8 +1,9 @@
 <script>
+    import { onDestroy, onMount } from "svelte";
     import { ArrowUpIcon } from "svelte-feather-icons";
     import request from "../request";
     import { apiRoute, getItem } from "../storage";
-    import { messagesStoreProvider, overlayStore, smallViewport, typingStore, userInfoStore } from "../stores";
+    import { messagesStoreProvider, overlayStore, selectedChannel, smallViewport, typingStore, userInfoStore } from "../stores";
 
     export let channel;
     let messageInput = "";
@@ -90,6 +91,11 @@
     const onInput = () => {
         typingStore.didInputKey();
     };
+
+    // Focus the text area when the component first loads, or when the user selects another channel
+    const focusTextarea = () => messageTextarea && messageTextarea.focus();
+    onMount(focusTextarea);
+    onDestroy(selectedChannel.subscribe(focusTextarea));
 </script>
 
 <style>