fix: Use form.requestSubmit() instead of clicking a hidden button

This commit is contained in:
April Hall 2025-02-08 15:33:19 -05:00
parent c335aa610c
commit ae6c3fe540
Signed by: arithefirst
GPG Key ID: 4508A15C4DB91C5B

View File

@ -18,7 +18,7 @@
let msg: string = $state(''); let msg: string = $state('');
const channel: string = $derived(page.params.channel); const channel: string = $derived(page.params.channel);
let textareaRef: HTMLElement | undefined = $state(); let textareaRef: HTMLElement | undefined = $state();
let submitRef: HTMLButtonElement | undefined = $state(); let formref: HTMLFormElement | undefined = $state();
onMount(() => { onMount(() => {
// Connect on page load // Connect on page load
@ -29,7 +29,7 @@
textareaRef?.addEventListener('keypress', (e) => { textareaRef?.addEventListener('keypress', (e) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
submitRef?.click(); formref?.requestSubmit();
} }
}); });
}); });
@ -55,6 +55,7 @@
{@render message(data.messages)} {@render message(data.messages)}
</div> </div>
<form <form
bind:this={formref}
class="flex w-full gap-1" class="flex w-full gap-1"
onsubmit={() => { onsubmit={() => {
socket?.sendMessage(user!, msg); socket?.sendMessage(user!, msg);
@ -70,6 +71,5 @@
shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1
focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"></textarea> focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"></textarea>
<Button class="h-full min-h-10 w-14" type="submit"><Send class="size-full" /></Button> <Button class="h-full min-h-10 w-14" type="submit"><Send class="size-full" /></Button>
<button type="submit" bind:this={submitRef} class="hidden">submit</button>
</form> </form>
</div> </div>