From ede32551bea21f14beb8b2a5e5a8dd8ba80e3371 Mon Sep 17 00:00:00 2001
From: Anders Olsson <anders.e.olsson@gmail.com>
Date: Mon, 8 Jun 2026 06:03:54 +0200
Subject: [PATCH] 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  | 81 +++++++++++++++++++---------------
 web/src/fields/fields.test.tsx | 17 ++++---
 2 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/web/src/fields/field-form.tsx b/web/src/fields/field-form.tsx
index 80da315..4bb86e5 100644
--- a/web/src/fields/field-form.tsx
+++ b/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
-          id="field-type"
-          value={dataType}
-          disabled={isEdit}
-          onChange={(e) => setDataType(e.target.value)}
-          className="w-full rounded-md border px-2 py-1 text-sm disabled:opacity-60"
-        >
-          {TYPES.map((type) => (
-            <option key={type} value={type}>
-              {t(`fields.types.${type}`)}
-            </option>
-          ))}
-        </select>
+        <Select value={dataType} onValueChange={(v) => setDataType(v ?? "")} disabled={isEdit}>
+          <SelectTrigger id="field-type">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {TYPES.map((type) => (
+              <SelectItem key={type} value={type}>
+                {t(`fields.types.${type}`)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
 
       {dataType === "term" && (
         <div className="space-y-1">
           <Label htmlFor="field-vocab">{t("fields.vocabulary")}</Label>
-          <select
-            id="field-vocab"
+          <Select
             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>
-            {vocabularies?.map((vocab) => (
-              <option key={vocab.id} value={vocab.id}>
-                {vocab.key}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger id="field-vocab">
+              <SelectValue placeholder={t("form.selectPlaceholder")} />
+            </SelectTrigger>
+            <SelectContent>
+              {vocabularies?.map((vocab) => (
+                <SelectItem key={vocab.id} value={vocab.id}>
+                  {vocab.key}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       )}
 
       {dataType === "authority" && (
         <div className="space-y-1">
           <Label htmlFor="field-kind">{t("fields.authorityKind")}</Label>
-          <select
-            id="field-kind"
+          <Select
             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>
-            {KINDS.map((kind) => (
-              <option key={kind} value={kind}>
-                {t(`authorities.${kind}`)}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger id="field-kind">
+              <SelectValue placeholder={t("fields.anyKind")} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="">{t("fields.anyKind")}</SelectItem>
+              {KINDS.map((kind) => (
+                <SelectItem key={kind} value={kind}>
+                  {t(`authorities.${kind}`)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       )}
 
diff --git a/web/src/fields/fields.test.tsx b/web/src/fields/fields.test.tsx
index 6cfdb8a..b939570 100644
--- a/web/src/fields/fields.test.tsx
+++ b/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");
-  const kind = await screen.findByLabelText(/authority kind/i);
-  await userEvent.selectOptions(kind, "person");
+  await choose(/^type$/i, /^authority$/i);
+  await screen.findByLabelText(/authority kind/i);
+  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));
 });