fix(web): focus popup search from anywhere in its row

apps/web/src/components/ui/combobox.tsx

@@ -106,21 +106,21 @@ function ComboboxInput({
 
 function ComboboxSearchInput(props: React.ComponentProps<typeof ComboboxInput>) {
   return (
-    <div className="min-w-0 shrink-0 px-3 pt-2.5">
+    <label className="block min-w-0 shrink-0 cursor-text px-3 pt-2.5">
       <div className="relative -translate-y-px border-b border-border/70 pb-1.5 transition-colors focus-within:border-ring">
         <SearchIcon
           aria-hidden="true"
           className="pointer-events-none absolute top-1.5 left-0 size-4 shrink-0 text-muted-foreground/55"
         />
         <ComboboxInput
           {...props}
-          className="[&_input]:h-6.5 [&_input]:ps-5 [&_input]:font-sans [&_input]:leading-6.5"
+          className="flex w-full [&_input]:h-6.5 [&_input]:ps-5 [&_input]:font-sans [&_input]:leading-6.5"
           showTrigger={false}
           size="sm"
           unstyled
         />
       </div>
-    </div>
+    </label>
   );
 }
 

apps/web/src/components/ui/menu.tsx

@@ -80,7 +80,7 @@ function MenuSearchInput({
   ...props
 }: Omit<InputProps, "className" | "size" | "unstyled" | "nativeInput"> & { busy?: boolean }) {
   return (
-    <div className="min-w-0 shrink-0 px-2 pt-1.5 pb-1">
+    <label className="block min-w-0 shrink-0 cursor-text px-2 pt-1.5 pb-1">
       <div className="relative -translate-y-px border-b border-border/70 pb-1.5 transition-colors focus-within:border-ring">
         {busy ? (
           <Spinner
@@ -107,7 +107,7 @@ function MenuSearchInput({
           }}
         />
       </div>
-    </div>
+    </label>
   );
 }
 

apps/web/src/components/ui/search-input.browser.test.tsx

@@ -0,0 +1,37 @@
+import { expect, it } from "vite-plus/test";
+import { userEvent } from "vite-plus/test/browser";
+
+import { render } from "../../../test/render";
+import { Combobox, ComboboxSearchInput } from "./combobox";
+import { MenuSearchInput } from "./menu";
+
+it.each(["combobox", "menu"] as const)(
+  "focuses the %s search when clicking the right edge of its row",
+  async (kind) => {
+    await using screen = await render(
+      <div className="w-96" data-testid="search-row">
+        {kind === "combobox" ? (
+          <Combobox>
+            <ComboboxSearchInput aria-label="Search options" />
+          </Combobox>
+        ) : (
+          <MenuSearchInput aria-label="Search options" />
+        )}
+      </div>,
+      { router: false /* input focus does not involve navigation */ },
+    );
+    const row = screen.getByTestId("search-row");
+    const field = screen.getByRole(kind === "combobox" ? "combobox" : "textbox", {
+      name: "Search options",
+    });
+    const { width, height } = row.element().getBoundingClientRect();
+
+    for (const x of [4, width / 2, width - 20, width - 4]) {
+      field.element().blur();
+      await userEvent.click(row, { position: { x, y: height / 2 } });
+      await expect.element(field).toHaveFocus();
+    }
+    await userEvent.keyboard("project");
+    await expect.element(field).toHaveValue("project");
+  },
+);