fix: bug in catalogue page searching + build

Author: Abh1noob

src/components/CatalogueContent.tsx

@@ -10,6 +10,7 @@ import { useRouter } from "next/navigation";
 import SearchBarChild from "./Searchbar/searchbar-child";
 import Loader from "./ui/loader";
 import { campuses, semesters } from "./select_options";
+import SearchBar from "./Searchbar/searchbar";
 
 const CatalogueContent = () => {
   const searchParams = useSearchParams();
@@ -165,7 +166,7 @@ const CatalogueContent = () => {
     <div className="min-h-screen px-2 md:p-8">
       <div className="mb-10 flex w-full flex-row items-center md:justify-between md:gap-10">
         <div className="w-[120%] md:w-[576px]">
-          <SearchBarChild />
+          <SearchBar />
         </div>
         <div className="flex gap-8">
           {subject && filterOptions && (

src/components/Searchbar/searchbar-child.tsx

@@ -9,12 +9,15 @@ function SearchBarChild({ initialSubjects }: { initialSubjects: string[] }) {
   const router = useRouter();
   const [searchText, setSearchText] = useState("");
   const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
   const [subjects] = useState<string[]>(initialSubjects);
   const suggestionsRef = useRef<HTMLUListElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const text = e.target.value;
     setSearchText(text);
+    setIsSearching(true);
 
     if (text.length > 1 && subjects.length > 0) {
       const filteredSuggestions = subjects.filter((subject) =>
@@ -29,15 +32,18 @@ function SearchBarChild({ initialSubjects }: { initialSubjects: string[] }) {
   const handleSelectSuggestion = (suggestion: string) => {
     setSearchText(suggestion);
     setSuggestions([]);
+    setIsSearching(false);
     router.push(`/catalogue?subject=${encodeURIComponent(suggestion)}`);
   };
 
   const handleClickOutside = (event: MouseEvent) => {
     if (
       suggestionsRef.current &&
-      !suggestionsRef.current.contains(event.target as Node)
+      !suggestionsRef.current.contains(event.target as Node) &&
+      !inputRef.current?.contains(event.target as Node)
     ) {
       setSuggestions([]);
+      setIsSearching(false);
     }
   };
 
@@ -55,15 +61,18 @@ function SearchBarChild({ initialSubjects }: { initialSubjects: string[] }) {
         onSubmit={(e) => {
           e.preventDefault();
           if (searchText) {
+            setIsSearching(false);
             router.push(`/catalogue?subject=${encodeURIComponent(searchText)}`);
           }
         }}
       >
         <div className="relative">
           <Input
+            ref={inputRef}
             type="text"
             value={searchText}
             onChange={handleSearchChange}
+            onFocus={() => setIsSearching(true)}
             placeholder="Search by subject..."
             className="text-md w-full rounded-full border bg-[#434dba] px-4 py-6 pr-10 font-sans tracking-wider text-white shadow-sm placeholder:text-white focus:outline-none focus:ring-2"
           />
@@ -73,29 +82,30 @@ function SearchBarChild({ initialSubjects }: { initialSubjects: string[] }) {
           >
             <Search className="h-5 w-5 text-white" />
           </button>
-          {(suggestions.length > 0 ||
-            (searchText.length > 1 && subjects.length > 0)) && (
-            <ul
-              ref={suggestionsRef}
-              className="absolute z-20 mx-0.5 mt-2 w-full max-w-xl rounded-md border border-[#434dba] bg-white text-center shadow-lg dark:bg-[#030712] md:mx-0"
-            >
-              {suggestions.length > 0 ? (
-                suggestions.map((suggestion, index) => (
-                  <li
-                    key={index}
-                    onClick={() => handleSelectSuggestion(suggestion)}
-                    className="cursor-pointer truncate p-2 hover:bg-gray-100 dark:hover:bg-gray-800"
-                  >
-                    {suggestion}
+          {isSearching &&
+            (suggestions.length > 0 ||
+              (searchText.length > 1 && subjects.length > 0)) && (
+              <ul
+                ref={suggestionsRef}
+                className="absolute z-20 mx-0.5 mt-2 w-full max-w-xl rounded-md border border-[#434dba] bg-white text-center shadow-lg dark:bg-[#030712] md:mx-0"
+              >
+                {suggestions.length > 0 ? (
+                  suggestions.map((suggestion, index) => (
+                    <li
+                      key={index}
+                      onClick={() => handleSelectSuggestion(suggestion)}
+                      className="cursor-pointer truncate p-2 hover:bg-gray-100 dark:hover:bg-gray-800"
+                    >
+                      {suggestion}
+                    </li>
+                  ))
+                ) : (
+                  <li className="p-2 text-gray-500 dark:text-gray-400">
+                    No subjects found
                   </li>
-                ))
-              ) : (
-                <li className="p-2 text-gray-500 dark:text-gray-400">
-                  No subjects found
-                </li>
-              )}
-            </ul>
-          )}
+                )}
+              </ul>
+            )}
         </div>
       </form>
     </div>