Merge pull request #250 from GenomicDataInfrastructure/ART-5374/searc…

…h-bar-enter-key-fix fix: #203 fix redirecting to first element when pressing enter to search
GenomicDataInfrastructure · May 14, 2024 · 4033bab · 4033bab
2 parents 91958ab + 83c935a
commit 4033bab
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx
@@ -88,10 +88,19 @@ function SearchBar({ queryParams, size }: SearchBarProps) {
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>): void {
     e.preventDefault();
+    setFetchSuggestions(false);
     setSuggestions([]);
     redirectToSearchResults(query);
   }
 
+  function handleEnter(e: React.KeyboardEvent<HTMLInputElement>): void {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      setSuggestions([]);
+      redirectToSearchResults(query);
+    }
+  }
+
   return (
     <form onSubmit={handleSubmit} className="w-full text-sm">
       <div className="relative">
@@ -101,6 +110,7 @@ function SearchBar({ queryParams, size }: SearchBarProps) {
           value={query}
           onChange={handleQueryChange}
           onBlur={handleBlur}
+          onKeyDown={handleEnter}
         ></input>
         {suggestions.length > 0 && (
           <div className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-white-smoke bg-white shadow-lg">