From dee0ee1bcb79bc66860eb07e21a4b109719d94a2 Mon Sep 17 00:00:00 2001
From: Kamil Tomsik <info@tomsik.cz>
Date: Thu, 28 Mar 2024 19:00:19 +0100
Subject: [PATCH] ChatInput: remove querySelector avoid useRef() & forwardRef()

---
 src/app/chat/ChatInput.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/chat/ChatInput.tsx b/src/app/chat/ChatInput.tsx
index 1975806..a50b71b 100644
--- a/src/app/chat/ChatInput.tsx
+++ b/src/app/chat/ChatInput.tsx
@@ -1,15 +1,15 @@
-import { useEffect } from "preact/hooks"
+import { useEffect, useId } from "preact/hooks"
 import { SendHorizontal } from "lucide"
 import { AutoGrowTextarea, Form, IconButton } from "../_components"
 
 export const ChatInput = ({ value, onChange, onSend }) => {
+  const id = useId()
+
   // Steal focus if no input is focused and a key is pressed
   useEffect(() => {
     const listener = e => {
       if (!("value" in e.target) && !e.altKey && !e.metaKey && !e.ctrlKey && e.key.length === 1) {
-        // TODO: useRef()
-        // TODO: or maybe just use one global listener and always find closest textarea/input?
-        const input = document.querySelector("footer textarea")!
+        const input = document.getElementById(id)!
         e.preventDefault()
         input.focus()
         input.value += e.key
@@ -30,6 +30,7 @@ export const ChatInput = ({ value, onChange, onSend }) => {
   return (
     <Form class="relative max-w-2xl mx-auto" onSubmit={onSend}>
       <AutoGrowTextarea
+        id={id}
         class="text-lg px-3 py-3 pr-16 bg-transparent"
         rows={1}
         placeholder="Ask anything..."