feat(web): use searchable combobox for term/authority fields on the object form (#27)

web/src/objects/field-input.tsx

@@ -4,12 +4,13 @@ import { useTranslation } from "react-i18next";
 import type { components } from "../api/schema";
 import { useAuthorities, useTerms } from "../api/queries";
 import { useConfig } from "../config/config-context";
+import { labelText } from "../lib/labels";
+import { OptionsCombobox } from "./options-combobox";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
 type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
-type LabelView = components["schemas"]["LabelView"];
 
 type FieldForm<TValues extends { fields: Record<string, unknown> }> = UseFormReturn<TValues>;
 
@@ -19,50 +20,6 @@ function fieldPath<TValues extends { fields: Record<string, unknown> }>(
   return `fields.${key}` as Path<TValues>;
 }
 
-function labelIn(labels: LabelView[], lang: string): string {
-  return (
-    labels.find((l) => l.lang === lang)?.label ??
-    labels.find((l) => l.lang === "en")?.label ??
-    labels[0]?.label ??
-    ""
-  );
-}
-
-// A native <select> keeps the bundle lean and is fully accessible; the shadcn Select
-// can replace it later without changing the value contract (option value = id).
-function OptionsSelect({
-  id,
-  value,
-  onChange,
-  options,
-  lang,
-  placeholder,
-}: {
-  id: string;
-  value: string;
-  onChange: (v: string) => void;
-  options: { id: string; labels: LabelView[] }[];
-  lang: string;
-  placeholder: string;
-}) {
-  return (
-    <select
-      id={id}
-      className="w-full rounded border px-2 py-1 text-sm"
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-    >
-      <option value="">{placeholder}</option>
-
-      {options.map((o) => (
-        <option key={o.id} value={o.id}>
-          {labelIn(o.labels, lang)}
-        </option>
-      ))}
-    </select>
-  );
-}
-
 export function FieldInput<TValues extends { fields: Record<string, unknown> }>({
   definition,
   form,
@@ -73,7 +30,7 @@ export function FieldInput<TValues extends { fields: Record<string, unknown> }>(
   const { t, i18n } = useTranslation();
   const { default_language } = useConfig();
   const lang = i18n.language.startsWith("sv") ? "sv" : "en";
-  const label = labelIn(definition.labels, lang);
+  const label = labelText(definition.labels, lang);
   const name = fieldPath<TValues>(definition.key);
   const placeholder = t("form.selectPlaceholder");
 
@@ -201,7 +158,7 @@ function TermField<TValues extends { fields: Record<string, unknown> }>({
         name={fieldPath<TValues>(definition.key)}
         rules={{ required: definition.required }}
         render={({ field }) => (
-          <OptionsSelect
+          <OptionsCombobox
             id={definition.key}
             value={(field.value as string) ?? ""}
             onChange={field.onChange}
@@ -239,7 +196,7 @@ function AuthorityField<TValues extends { fields: Record<string, unknown> }>({
         name={fieldPath<TValues>(definition.key)}
         rules={{ required: definition.required }}
         render={({ field }) => (
-          <OptionsSelect
+          <OptionsCombobox
             id={definition.key}
             value={(field.value as string) ?? ""}
             onChange={field.onChange}