diff options
Diffstat (limited to 'ui/lib/components/MessageInput.svelte')
| -rw-r--r-- | ui/lib/components/MessageInput.svelte | 34 |
1 files changed, 14 insertions, 20 deletions
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte index e829674..220ed3b 100644 --- a/ui/lib/components/MessageInput.svelte +++ b/ui/lib/components/MessageInput.svelte @@ -1,40 +1,34 @@ <script> - import { tick } from 'svelte'; import { postToChannel } from '$lib/apiServer'; - export let channel = null; - let input; - let value = ''; + let { channel } = $props(); + + let form; + let value = $state(''); let pending = false; - $: disabled = pending || channel === null; + let disabled = $derived(pending); - async function handleSubmit() { - if (channel !== null) { - pending = true; - // TODO try/catch: - await postToChannel(channel, value); - pending = false; - value = ''; - await tick(); - input.focus(); - } + async function onSubmit(event) { + event.preventDefault(); + pending = true; + await postToChannel(channel, value); + form.reset(); + pending = false; } function onKeyDown(event) { if (!event.altKey && event.key === 'Enter') { - handleSubmit(); - event.preventDefault(); + onSubmit(event); } } </script> -<form on:submit|preventDefault={handleSubmit} class="flex flex-row flex-nowrap"> +<form bind:this={form} onsubmit={onSubmit} class="flex flex-row flex-nowrap"> <textarea - bind:this={input} + onkeydown={onKeyDown} bind:value {disabled} - on:keydown={onKeyDown} type="search" class="flex-auto h-6 input rounded-r-none" ></textarea> |