From 410f28f827fdf2e62b47f3dedb9d94b22f18bb27 Mon Sep 17 00:00:00 2001
From: KTibow <KTibow@users.noreply.github.com>
Date: Mon, 9 Dec 2024 20:31:41 -0800
Subject: [PATCH] a different kind of autofocus?

---
 src/Chat.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/Chat.svelte b/src/Chat.svelte
index 8ec8865..f668e46 100644
--- a/src/Chat.svelte
+++ b/src/Chat.svelte
@@ -6,6 +6,7 @@
   import stream from "./stream";
 
   export let groqKey: string;
+  let textarea: HTMLTextAreaElement;
 
   const getModel = async () => {
     if (localStorage.model) return localStorage.model;
@@ -46,6 +47,13 @@
     }
   };
 
+  const maybeFocus = (e: KeyboardEvent) => {
+    const isAlphanumeric = /^[a-zA-Z0-9]$/.test(e.key);
+    if (e.target == document.body && isAlphanumeric && !e.ctrlKey) {
+      textarea.focus();
+    }
+  };
+
   let conversation: { role: string; content: string }[] = [];
   const searchParams = new URLSearchParams(window.location.search);
   const q = searchParams.get("q");
@@ -54,6 +62,7 @@
   }
 </script>
 
+<svelte:window on:keydown={maybeFocus} />
 <button on:click={() => (conversation = [])}>
   <Icon icon={iconTrash} width="1.5rem" height="1.5rem" />
 </button>
@@ -75,10 +84,9 @@
     textarea.value = "";
   }}
 >
-  <!-- svelte-ignore a11y_autofocus -->
   <textarea
     name="query"
-    autofocus
+    bind:this={textarea}
     on:keydown={(e) => {
       if (e.key == "Enter" && !e.shiftKey) {
         e.currentTarget.form.requestSubmit();