fix more arrow up issues

devflowinc · Aug 29, 2024 · 5f505b7 · 5f505b7
1 parent 259a352
commit 5f505b7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/clients/search-component/src/TrieveModal/index.tsx b/clients/search-component/src/TrieveModal/index.tsx
@@ -64,8 +64,11 @@ export const TrieveModalSearch = ({
     }
   }, [query]);
 
-  const checkForCMDK = (e: KeyboardEvent) => {
+  const checkForInteractions = (e: KeyboardEvent) => {
     if (e.code === "KeyK" && e.metaKey && !open) setOpen(true);
+    if (e.code === "ArrowDown" && inputRef.current === document.activeElement) {
+      document.getElementById(`trieve-search-item-0`)?.focus();
+    }
   };
 
   const onUpOrDownClicked = (index: number, code: string) => {
@@ -83,9 +86,9 @@ export const TrieveModalSearch = ({
   };
 
   useEffect(() => {
-    document.addEventListener("keydown", checkForCMDK);
+    document.addEventListener("keydown", checkForInteractions);
     return () => {
-      document.removeEventListener("keydown", checkForCMDK);
+      document.removeEventListener("keydown", checkForInteractions);
     };
   }, []);
 
@@ -105,9 +108,9 @@ export const TrieveModalSearch = ({
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
             >
               <circle cx="11" cy="11" r="8"></circle>
               <path d="m21 21-4.3-4.3"></path>
@@ -132,9 +135,9 @@ export const TrieveModalSearch = ({
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
               className="search-icon"
             >
               <circle cx="11" cy="11" r="8"></circle>

diff --git a/clients/search-component/src/TrieveModal/item.tsx b/clients/search-component/src/TrieveModal/item.tsx
@@ -27,17 +27,16 @@ export const Item = ({
   const checkForUpAndDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.code === "ArrowDown" || e.code === "ArrowUp") {
-        e.preventDefault();
         onUpOrDownClicked(index, e.code);
       }
     },
     [item]
   );
 
   useEffect(() => {
-    itemRef.current.addEventListener("keydown", checkForUpAndDown, false);
+    itemRef.current?.addEventListener("keydown", checkForUpAndDown);
     return () => {
-      itemRef.current.removeEventListener("keydown", checkForUpAndDown, false);
+      itemRef.current?.removeEventListener("keydown", checkForUpAndDown);
     };
   }, []);
 

diff --git a/clients/search-component/src/app.css b/clients/search-component/src/app.css
@@ -136,7 +136,7 @@
   }
 
   .item {
-    @apply hover:bg-zinc-800 border-zinc-700 focus:bg-zinc-800;
+    @apply hover:bg-zinc-800 border-zinc-700 focus:bg-zinc-800 bg-zinc-900;
 
     .description {
       @apply text-zinc-400;