hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

automatically focus the message input when the user selects another channel

Browse source
This commit is contained in:
hippoz 2022-08-31 12:07:25 +03:00
parent 4080e69b11
commit e1490f1081
Signed by: hippoz
GPG key ID: 7C52899193467641
1 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/components/MessageInput.svelte
View file

@ -1,8 +1,9 @@
<script> <script>
import { onDestroy, onMount } from "svelte";
import { ArrowUpIcon } from "svelte-feather-icons"; import { ArrowUpIcon } from "svelte-feather-icons";
import request from "../request"; import request from "../request";
import { apiRoute, getItem } from "../storage"; 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; export let channel;
let messageInput = ""; let messageInput = "";
@ -90,6 +91,11 @@
const onInput = () => { const onInput = () => {
typingStore.didInputKey(); 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> </script>
<style> <style>