Refactor Search module front

abourtnik · Nov 22, 2024 · 2ca079d · 2ca079d
1 parent edfe5cc
commit 2ca079d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/resources/js/components/Search/SearchBar.tsx b/resources/js/components/Search/SearchBar.tsx
@@ -31,7 +31,7 @@ function Main ({responsive = true} : Props) {
 
     useClickOutside(form, () => setShowResults(false))
 
-    const {index, navigate} = useKeyboardNavigate({
+    const {index, navigate, resetIndex} = useKeyboardNavigate({
         length: results && results.items.length + 1,
         onSelect: (index) => {
             window.location.href = results!.items[index]?.url ?? '/search?q=' + query;
@@ -44,14 +44,19 @@ function Main ({responsive = true} : Props) {
         }
     }
 
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setQuery(e.currentTarget.value)
+        resetIndex()
+    }
+
     return (
         <>
         <form ref={form} method="GET" className="d-flex w-100 mb-0" role="search" action="/search" onSubmit={handleSubmit}>
             <div className="input-group flex-nowrap">
                 <div className={'position-relative'} style={{flex: '1 1 auto'}}>
                     <input
                         onClick={() => setShowResults(true)}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.currentTarget.value)}
+                        onChange={handleChange}
                         className="form-control rounded-5 rounded-end radius-end-0 border border-secondary"
                         type="search"
                         placeholder={t("Search")}

diff --git a/resources/js/components/Search/SearchModel.tsx b/resources/js/components/Search/SearchModel.tsx
@@ -2,6 +2,7 @@ import {useState, useRef} from 'preact/hooks';
 import {useSearchQuery, useClickOutside, useKeyboardNavigate} from "@/hooks";
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 import {searchModel} from "@/api/clipzone";
+import {ChangeEvent} from "react";
 
 type Props = {
     endpoint: string,
@@ -35,19 +36,24 @@ function Main ({endpoint, name, label = null, value = null} : Props) {
         setShowResults(false)
     }
 
-    const {index, navigate} = useKeyboardNavigate({
+    const {index, navigate, resetIndex} = useKeyboardNavigate({
         length: results?.data.length,
         onSelect: select
     });
 
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setQuery(e.currentTarget.value)
+        resetIndex()
+    }
+
     return (
         <div className={'position-relative'}>
             <label htmlFor={name} className="form-label fw-bold">{label ?? name.charAt(0).toUpperCase() + name.slice(1)}</label>
             <div className={'position-relative'}>
                 <input
                     onClick={() => setShowResults(true)}
                     ref={input}
-                    onChange={(e) => setQuery(e.target.value)}
+                    onChange={handleChange}
                     type="search"
                     className="form-control"
                     id={name}

diff --git a/resources/js/hooks/useKeyboardNavigate.ts b/resources/js/hooks/useKeyboardNavigate.ts
@@ -10,10 +10,15 @@ export function useKeyboardNavigate (options: Options) {
     const {length, onSelect} = options;
 
     const [index, setIndex] = useState<number | null>(null);
+
+    const resetIndex = () => setIndex(null);
+
     const navigate = (e: KeyboardEvent<HTMLInputElement>) => {
 
         if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key)) {
 
+            e.preventDefault();
+
             if (length === undefined || length === 0) {
                 setIndex(null);
                 return
@@ -44,5 +49,5 @@ export function useKeyboardNavigate (options: Options) {
         }
     }
 
-    return {index, navigate}
+    return {index, navigate, resetIndex}
 }