feat(web): field-form selects use ui/Select; rewrite select tests (#51)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/fields/field-form.tsx

@@ -12,6 +12,13 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 type LabelInput = components["schemas"]["LabelInput"];
 type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
@@ -117,58 +124,62 @@ export function FieldForm({
 
       <div className="space-y-1">
         <Label htmlFor="field-type">{t("fields.type")}</Label>
-        <select
+        <Select value={dataType} onValueChange={(v) => setDataType(v ?? "")} disabled={isEdit}>
-          id="field-type"
+          <SelectTrigger id="field-type">
-          value={dataType}
+            <SelectValue />
-          disabled={isEdit}
+          </SelectTrigger>
-          onChange={(e) => setDataType(e.target.value)}
+          <SelectContent>
-          className="w-full rounded-md border px-2 py-1 text-sm disabled:opacity-60"
+            {TYPES.map((type) => (
-        >
+              <SelectItem key={type} value={type}>
-          {TYPES.map((type) => (
+                {t(`fields.types.${type}`)}
-            <option key={type} value={type}>
+              </SelectItem>
-              {t(`fields.types.${type}`)}
+            ))}
-            </option>
+          </SelectContent>
-          ))}
+        </Select>
-        </select>
       </div>
 
       {dataType === "term" && (
         <div className="space-y-1">
           <Label htmlFor="field-vocab">{t("fields.vocabulary")}</Label>
-          <select
+          <Select
-            id="field-vocab"
             value={vocabularyId}
+            onValueChange={(v) => setVocabularyId(v ?? "")}
             disabled={isEdit}
-            onChange={(e) => setVocabularyId(e.target.value)}
-            className="w-full rounded-md border px-2 py-1 text-sm disabled:opacity-60"
           >
-            <option value="">{t("form.selectPlaceholder")}</option>
+            <SelectTrigger id="field-vocab">
-            {vocabularies?.map((vocab) => (
+              <SelectValue placeholder={t("form.selectPlaceholder")} />
-              <option key={vocab.id} value={vocab.id}>
+            </SelectTrigger>
-                {vocab.key}
+            <SelectContent>
-              </option>
+              {vocabularies?.map((vocab) => (
-            ))}
+                <SelectItem key={vocab.id} value={vocab.id}>
-          </select>
+                  {vocab.key}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       )}
 
       {dataType === "authority" && (
         <div className="space-y-1">
           <Label htmlFor="field-kind">{t("fields.authorityKind")}</Label>
-          <select
+          <Select
-            id="field-kind"
             value={authorityKind}
+            onValueChange={(v) => setAuthorityKind(v ?? "")}
             disabled={isEdit}
-            onChange={(e) => setAuthorityKind(e.target.value)}
-            className="w-full rounded-md border px-2 py-1 text-sm disabled:opacity-60"
           >
-            <option value="">{t("fields.anyKind")}</option>
+            <SelectTrigger id="field-kind">
-            {KINDS.map((kind) => (
+              <SelectValue placeholder={t("fields.anyKind")} />
-              <option key={kind} value={kind}>
+            </SelectTrigger>
-                {t(`authorities.${kind}`)}
+            <SelectContent>
-              </option>
+              <SelectItem value="">{t("fields.anyKind")}</SelectItem>
-            ))}
+              {KINDS.map((kind) => (
-          </select>
+                <SelectItem key={kind} value={kind}>
+                  {t(`authorities.${kind}`)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       )}
 

web/src/fields/fields.test.tsx

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { screen, waitFor } from "@testing-library/react";
+import { screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { http, HttpResponse } from "msw";
 import { Route, Routes } from "react-router-dom";
@@ -16,6 +16,11 @@ function tree() {
   );
 }
 
+async function choose(triggerName: RegExp, optionName: RegExp) {
+  await userEvent.click(screen.getByRole("combobox", { name: triggerName }));
+  await userEvent.click(await within(document.body).findByRole("option", { name: optionName }));
+}
+
 test("lists field definitions grouped, with an Other heading for ungrouped", async () => {
   renderApp(tree(), { route: "/fields" });
   expect(await screen.findByText("Inscription")).toBeInTheDocument();
@@ -56,9 +61,9 @@ test("selecting Authority reveals the kind picker and posts the chosen kind", as
 
   await userEvent.type(screen.getByLabelText(/^key$/i), "maker");
   await userEvent.type(screen.getByLabelText(/^label$/i), "Maker");
-  await userEvent.selectOptions(screen.getByLabelText(/^type$/i), "authority");
+  await choose(/^type$/i, /^authority$/i);
-  const kind = await screen.findByLabelText(/authority kind/i);
+  await screen.findByLabelText(/authority kind/i);
-  await userEvent.selectOptions(kind, "person");
+  await choose(/authority kind/i, /^person$/i);
   await userEvent.click(screen.getByRole("button", { name: /create field/i }));
 
   await waitFor(() => expect(body?.authority_kind).toBe("person"));
@@ -77,7 +82,7 @@ test("selecting Term reveals the vocabulary picker and blocks submit until chose
 
   await userEvent.type(screen.getByLabelText(/^key$/i), "material");
   await userEvent.type(screen.getByLabelText(/^label$/i), "Material");
-  await userEvent.selectOptions(screen.getByLabelText(/^type$/i), "term");
+  await choose(/^type$/i, /^term$/i);
 
   const vocab = await screen.findByLabelText(/^vocabulary$/i);
 
@@ -87,7 +92,7 @@ test("selecting Term reveals the vocabulary picker and blocks submit until chose
   expect(await screen.findByRole("alert")).toBeInTheDocument();
   expect(posted).toBe(false);
 
-  await userEvent.selectOptions(vocab, "v-material");
+  await choose(/^vocabulary$/i, /^material$/i);
   await userEvent.click(screen.getByRole("button", { name: /create field/i }));
   await waitFor(() => expect(posted).toBe(true));
 });