fix arrow up and down

Author: SaraVieira

clients/search-component/src/TrieveModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { act, useEffect, useState } from "react";
+import React, { act, useEffect, useRef, useState } from "react";
 import { SearchChunksReqPayload, TrieveSDK } from "trieve-ts-sdk";
 import { Chunk } from "../utils/types";
 import * as Dialog from "@radix-ui/react-dialog";
@@ -32,6 +32,7 @@ export const TrieveModalSearch = ({
   const [query, setQuery] = useState("");
   const [results, setResults] = useState<ChunkWithHighlights[]>([]);
   const [open, setOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const search = async () => {
     const results = await trieve.search({
@@ -68,19 +69,16 @@ export const TrieveModalSearch = ({
   };
 
   const onUpOrDownClicked = (index: number, code: string) => {
-    console.log("clicked");
     if (code === "ArrowDown") {
-      document
-        .getElementsByClassName("trieve-elements-search")[0]
-        .getElementsByClassName("item")
-        [index + 1]?.focus();
+      index < results.length - 1
+        ? document.getElementById(`trieve-search-item-${index + 1}`)?.focus()
+        : document.getElementById(`trieve-search-item-0`)?.focus();
     }
 
     if (code === "ArrowUp") {
-      document
-        .getElementsByClassName("trieve-elements-search")[0]
-        .getElementsByClassName("item")
-        [index - 1]?.focus();
+      index > 0
+        ? document.getElementById(`trieve-search-item-${index - 1}`)?.focus()
+        : inputRef.current?.focus();
     }
   };
 
@@ -89,7 +87,7 @@ export const TrieveModalSearch = ({
     return () => {
       document.removeEventListener("keydown", checkForCMDK);
     };
-  });
+  }, []);
 
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
@@ -143,6 +141,7 @@ export const TrieveModalSearch = ({
               <path d="m21 21-4.3-4.3"></path>
             </svg>
             <input
+              ref={inputRef}
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder={placeholder || "sup"}

clients/search-component/src/TrieveModal/item.tsx

@@ -1,6 +1,6 @@
 import { ChunkWithHighlights } from ".";
 import { Chunk } from "../utils/types";
-import React, { useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 
 type Props = {
   item: ChunkWithHighlights;
@@ -24,26 +24,28 @@ export const Item = ({
     item.chunk.metadata?.page_title ||
     item.chunk.metadata?.name;
 
-  const checkForUpAndDown = (e: KeyboardEvent) => {
-    if (
-      (e.code === "ArrowDown" || e.code === "ArrowUp") &&
-      itemRef.current === document.activeElement
-    ) {
-      onUpOrDownClicked(index, e.code);
-    }
-  };
+  const checkForUpAndDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.code === "ArrowDown" || e.code === "ArrowUp") {
+        e.preventDefault();
+        onUpOrDownClicked(index, e.code);
+      }
+    },
+    [item]
+  );
 
   useEffect(() => {
-    document.addEventListener("keydown", checkForUpAndDown);
+    itemRef.current.addEventListener("keydown", checkForUpAndDown, false);
     return () => {
-      document.removeEventListener("keydown", checkForUpAndDown);
+      itemRef.current.removeEventListener("keydown", checkForUpAndDown, false);
     };
-  });
+  }, []);
 
   return (
     <li>
       <Component
         ref={itemRef}
+        id={`trieve-search-item-${index}`}
         className="item"
         onClick={() => onResultClick && onResultClick(item.chunk)}
         {...(item.chunk.link ? { href: item.chunk.link } : {})}
@@ -75,9 +77,9 @@ export const Item = ({
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
           >
             <path stroke="none" d="M0 0h24v24H0z" fill="none" />
             <path d="M9 6l6 6l-6 6" />