fix a search crash

Author: sphinxrave

packages/react/src/components/header/searchbar/components/AutocompleteDropdownItem.tsx

@@ -27,9 +27,9 @@ export function AutocompleteDropdownItem({
       className={"cursor-pointer"}
       {...rest}
     >
-      <span className="font-medium text-base-11">
+      <span className="mr-1 font-medium text-base-11">
         {t(`search.class.${item.type}`, item.type)}
-        {": "}
+        {":"}
       </span>
       {item.incomplete ? (
         <span className="font-normal text-base-9">

packages/react/src/components/header/searchbar/components/SearchBar.tsx

@@ -108,7 +108,7 @@ export function SearchBar({
       shouldFilter={false}
     >
       <Popover
-        open={open && autocomplete.length > 0}
+        open={open}
         onOpenChange={() => {
           /* ignore the event, basically popover needs to be mostly inert and controlled by the focus state of the input */
         }}

packages/react/src/components/header/searchbar/helper.test.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect } from "vitest";
+import { splitSearchClassTerms } from "./helper";
+import { JSON_SCHEMA } from "./types";
+
+describe("splitSearchClassTerms", () => {
+  // Setup mock language category mapping
+  const mockLangCategoryMap = {
+    org: "org",
+    組織: "org",
+    from: "from",
+    から: "from",
+    to: "to",
+    まで: "to",
+    search: "search",
+    検索: "search",
+    description: "description",
+    説明: "description",
+    type: "type",
+    タイプ: "type",
+    topic: "topic",
+    トピック: "topic",
+    vtuber: "vtuber",
+    lang: "lang",
+    言語: "lang",
+    has_song: "has_song",
+    歌あり: "has_song",
+  } as Record<string, keyof typeof JSON_SCHEMA>;
+
+  it("should correctly split valid category and search term", () => {
+    const result = splitSearchClassTerms("org:hololive", mockLangCategoryMap);
+    expect(result).toEqual(["org", "hololive"]);
+  });
+
+  it("should handle Japanese colons and categories", () => {
+    const result = splitSearchClassTerms(
+      "組織：ホロライブ",
+      mockLangCategoryMap,
+    );
+    expect(result).toEqual(["org", "ホロライブ"]);
+  });
+
+  it("should correctly handle date categories", () => {
+    const result = splitSearchClassTerms(
+      "from:2024-01-01",
+      mockLangCategoryMap,
+    );
+    expect(result).toEqual(["from", "2024-01-01"]);
+  });
+
+  it("should handle Japanese date categories", () => {
+    const result = splitSearchClassTerms(
+      "から：2024-01-01",
+      mockLangCategoryMap,
+    );
+    expect(result).toEqual(["from", "2024-01-01"]);
+  });
+
+  it("should return undefined category for invalid category prefix", () => {
+    const result = splitSearchClassTerms("invalid:term", mockLangCategoryMap);
+    expect(result).toEqual([undefined, "invalid:term"]);
+  });
+
+  it("should handle search terms without category prefix", () => {
+    const result = splitSearchClassTerms("searchterm", mockLangCategoryMap);
+    expect(result).toEqual([undefined, "searchterm"]);
+  });
+
+  it("should handle empty search value after category", () => {
+    const result = splitSearchClassTerms("org:", mockLangCategoryMap);
+    expect(result).toEqual(["org", ""]);
+    const result2 = splitSearchClassTerms("org", mockLangCategoryMap);
+    expect(result2).toEqual(["org", ""]);
+  });
+
+  it("should handle whitespace around category and value", () => {
+    const result = splitSearchClassTerms(
+      " type : stream ",
+      mockLangCategoryMap,
+    );
+    expect(result).toEqual(["type", "stream"]);
+  });
+
+  it("should handle array type categories", () => {
+    const result = splitSearchClassTerms("topic:music", mockLangCategoryMap);
+    expect(result).toEqual(["topic", "music"]);
+  });
+
+  it("should handle string type categories", () => {
+    const result = splitSearchClassTerms(
+      "description:test content",
+      mockLangCategoryMap,
+    );
+    expect(result).toEqual(["description", "test content"]);
+  });
+
+  it("should preserve colons in search term when no valid category", () => {
+    const result = splitSearchClassTerms(
+      "something:else:here",
+      mockLangCategoryMap,
+    );
+    expect(result).toEqual([undefined, "something:else:here"]);
+  });
+
+  it("should handle empty string input", () => {
+    const result = splitSearchClassTerms("", mockLangCategoryMap);
+    expect(result).toEqual([undefined, ""]);
+  });
+});

packages/react/src/components/header/searchbar/hooks/useClientSuggestions.test.ts

@@ -78,6 +78,35 @@ describe("useClientSuggestions", () => {
     ]);
   });
 
+  it("handles ONLY a SearchCategory by providing a incomplete QueryItem", () => {
+    const { result } = renderHook(() =>
+      useClientSuggestions("topic", "", mockT),
+    );
+
+    expect(result.current).toEqual([
+      {
+        type: "topic",
+        value: "",
+        text: "",
+        incomplete: true,
+      },
+    ]);
+  });
+
+  it("handles PARTIAL searchCategory by providing a matched QueryItem", () => {
+    const { result } = renderHook(() =>
+      useClientSuggestions(undefined, "Topi", mockT),
+    );
+
+    expect(result.current).toEqual([
+      {
+        type: "search",
+        value: "Topi",
+        text: "Topi",
+      },
+    ]);
+  });
+
   it("limits organization suggestions to 5 when no category specified", () => {
     const manyOrgs = Array.from({ length: 10 }, (_, i) => ({
       name: `Munchies ${i}`,

packages/react/src/components/header/searchbar/hooks/useClientSuggestions.ts

@@ -64,11 +64,12 @@ export function useClientSuggestions(
     // Handle category-specific static suggestions that only show up when a category is specified
     else if (searchCategory && STATIC_SUGGESTIONS[searchCategory]) {
       suggestions.push(...STATIC_SUGGESTIONS[searchCategory]);
-    } else if (searchCategory) {
+    } else if (searchCategory && !searchString) {
       suggestions.push({
         type: searchCategory,
         value: searchString,
         text: searchString,
+        incomplete: true,
       });
     }
 
@@ -85,9 +86,9 @@ export function useClientSuggestions(
       const categoryAutofill = FIRST_SEARCH.filter(
         (x) =>
           !searchString ||
-          t(`search.class.${x.type}`, { defaultValue: x.type }).startsWith(
-            searchString,
-          ),
+          t(`search.class.${x.type}`, { defaultValue: x.type })
+            .toLowerCase()
+            .startsWith(searchString.toLowerCase()),
       );
       suggestions.push(...categoryAutofill);
     }