From fffe425c9cd6f578197926037e1e52488057de40 Mon Sep 17 00:00:00 2001
From: Kalvin C <kalvinnchau@users.noreply.github.com>
Date: Tue, 28 Apr 2026 17:33:15 -0700
Subject: [PATCH] chore: disable spellcheck in model search (#8889)

---
 .../src/features/chat/ui/AgentModelPicker.tsx | 20 ++++++-------
 .../ui/__tests__/AgentModelPicker.test.tsx    | 28 +++++++++++++++++++
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/ui/goose2/src/features/chat/ui/AgentModelPicker.tsx b/ui/goose2/src/features/chat/ui/AgentModelPicker.tsx
index 20f91d37..43ad4ec6 100644
--- a/ui/goose2/src/features/chat/ui/AgentModelPicker.tsx
+++ b/ui/goose2/src/features/chat/ui/AgentModelPicker.tsx
@@ -12,6 +12,7 @@ import { useProviderInventoryStore } from "@/features/providers/stores/providerI
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
+import { SearchBar } from "@/shared/ui/SearchBar";
 import { ScrollArea } from "@/shared/ui/scroll-area";
 import { Spinner } from "@/shared/ui/spinner";
 import {
@@ -244,17 +245,14 @@ function AllModelsList({
         >
           <IconChevronLeft className="size-4" />
         </button>
-        <div className="relative min-w-0 flex-1">
-          <IconSearch className="pointer-events-none absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
-          <input
-            ref={inputRef}
-            type="text"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder={t("toolbar.searchModels")}
-            className="h-7 w-full rounded-sm border bg-transparent pl-7 pr-2 text-sm outline-none placeholder:text-muted-foreground focus:ring-1 focus:ring-ring"
-          />
-        </div>
+        <SearchBar
+          inputRef={inputRef}
+          size="small"
+          value={query}
+          onChange={setQuery}
+          placeholder={t("toolbar.searchModels")}
+          className="min-w-0 flex-1"
+        />
       </div>
       {filtered.length > 0 ? (
         <ScrollArea className="min-h-0 min-w-0 flex-1">
diff --git a/ui/goose2/src/features/chat/ui/__tests__/AgentModelPicker.test.tsx b/ui/goose2/src/features/chat/ui/__tests__/AgentModelPicker.test.tsx
index 51c4d969..0c42694a 100644
--- a/ui/goose2/src/features/chat/ui/__tests__/AgentModelPicker.test.tsx
+++ b/ui/goose2/src/features/chat/ui/__tests__/AgentModelPicker.test.tsx
@@ -129,6 +129,34 @@ describe("AgentModelPicker", () => {
     expect(longModelButton).toHaveClass("overflow-hidden");
   });
 
+  it("disables spellcheck in the all-models search field", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <AgentModelPicker
+        agents={AGENTS}
+        selectedAgentId="goose"
+        onAgentChange={vi.fn()}
+        currentModelId="claude-sonnet-4"
+        currentModelName="Claude Sonnet 4"
+        availableModels={[
+          { id: "claude-sonnet-4", name: "Claude Sonnet 4", recommended: true },
+          { id: "gpt-4o-mini-2024-07-18", name: "GPT-4o mini" },
+        ]}
+        onModelChange={vi.fn()}
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: /choose agent and model/i }),
+    );
+    await user.click(screen.getByRole("button", { name: "Browse all models" }));
+
+    const search = screen.getByPlaceholderText("Search models...");
+
+    expect(search).toHaveAttribute("spellcheck", "false");
+  });
+
   it("shows only agent name when no model info is available", () => {
     render(
       <AgentModelPicker