@@ -0,0 +1,10 @@
+---
+'@object-ui/console': patch
+---
+
+fix(console): a domain-bearing settings select shows the option name for a stored code
+
+Clause-②: no
+Metadata-protocol: none
+
+A settings `select` that declares a `valueDomain` (Company → Country, Localization → Default country, Time zone, Currency) showed its stored value bare in the box, so a stored `DE` read as `DE` and the option names were visible only in the suggestion list. The box now shows the matching option's name ("Germany (DE)") and the suggestions are offered by name; picking one still stores its code. A code typed by hand is committed as typed and reads as its name once the field loses focus, and a value outside the option list is still committed verbatim and judged by the server, as before.
@@ -6,7 +6,7 @@
  * (which carries provenance and lock state).
  */
 
-import { cloneElement, isValidElement, lazy, Suspense, useId, type ReactElement } from 'react';
+import { cloneElement, isValidElement, lazy, Suspense, useId, useState, type ReactElement } from 'react';
 import {
   Input,
   Textarea,
@@ -274,6 +274,15 @@ function FieldError({ id, message }: { id: string; message: string }) {
  * refused by the server with `invalid_value` + `constraint: { valueDomain }`,
  * which lands in the field-error slot the wrapper already owns.
  *
+ * The box shows NAMES, the draft holds CODES (objectstack#28068). A stored
+ * value that equals an option's `value` is shown as that option's label, and
+ * the suggestions are the labels, so picking "Germany (DE)" leaves the name in
+ * the box while `DE` is what is committed. A datalist commits its option's
+ * `value` attribute into the box verbatim, which is why the suggestions carry
+ * the label there and `committedValue` maps it back. Typed text that equals an
+ * option's `value` is a code and is committed as typed; any other text is
+ * committed verbatim, as before.
+ *
  * Props beyond its own are forwarded to the `<input>` so `wrapper`'s
  * `aria-invalid` / `aria-describedby` reach the focusable control rather than a
  * wrapping node (same seam as Combobox's trigger pass-through, objectui#3318).
@@ -284,6 +293,7 @@ function DomainCombobox({
   options,
   disabled,
   onChange,
+  onBlur,
   ...inputProps
 }: {
   id: string;
@@ -293,6 +303,17 @@ function DomainCombobox({
   onChange: (next: unknown) => void;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'id'>) {
   const listId = `${id}-domain`;
+  const stored = value == null ? null : String(value);
+  const displayOf = (code: string | null): string =>
+    code === null ? '' : options.find((opt) => opt.value === code)?.label ?? code;
+  const committedValue = (text: string): string | null => {
+    if (text === '' || options.some((opt) => opt.value === text)) return textOrUnset(text);
+    return options.find((opt) => opt.label === text)?.value ?? text;
+  };
+  // What the admin typed, kept while it still stands for the stored value; a
+  // value changed from outside (a reset, a re-read after save) shows as its name.
+  const [typed, setTyped] = useState<string | null>(null);
+  const shown = typed !== null && committedValue(typed) === stored ? typed : displayOf(stored);
   return (
     <>
       <Input
@@ -301,17 +322,23 @@ function DomainCombobox({
         // `list` only when there is something to suggest: an empty <datalist>
         // renders a dead dropdown affordance on some browsers.
         list={options.length > 0 ? listId : undefined}
-        value={value == null ? '' : String(value)}
+        value={shown}
         disabled={disabled}
-        onChange={(e) => onChange(textOrUnset(e.target.value))}
+        onChange={(e) => {
+          setTyped(e.target.value);
+          onChange(committedValue(e.target.value));
+        }}
+        onBlur={(e) => {
+          // A code typed by hand reads as its name once the admin moves on.
+          setTyped(null);
+          onBlur?.(e);
+        }}
         {...inputProps}
       />
       {options.length > 0 ? (
         <datalist id={listId}>
           {options.map((opt) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
+            <option key={opt.value} value={opt.label} />
           ))}
         </datalist>
       ) : null}
 
@@ -0,0 +1,118 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * SettingsField — a domain-bearing `select` shows a stored code as its
+ * option's name, and still stores the code (objectstack#28068).
+ *
+ * Company `country` and Localization `default_country` are selects over the
+ * `iso_3166_alpha2` domain whose options name each code ("Germany (DE)"). The
+ * combobox showed the stored `DE` bare in the box, so the names were visible
+ * only in the suggestion list. The suggest-but-allow-anything contract of the
+ * domain control is unchanged: a value outside the table is still committed
+ * verbatim, and the server stays the judge of the domain.
+ */
+
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import { useState } from 'react';
+
+import { SettingsField } from '../SettingsField';
+import type { Specifier } from '../types';
+
+/** Abridged `company.country` as the server declares it. */
+const COUNTRY: Specifier = {
+  type: 'select',
+  key: 'country',
+  label: 'Country',
+  valueDomain: 'iso_3166_alpha2',
+  options: [
+    { value: 'US', label: 'United States (US)' },
+    { value: 'DE', label: 'Germany (DE)' },
+    { value: 'FR', label: 'France (FR)' },
+  ],
+};
+
+/** A settings page's draft in one row: `value` follows what `onChange` commits. */
+function Row({ initial, onCommit }: { initial: unknown; onCommit: (v: unknown) => void }) {
+  const [value, setValue] = useState<unknown>(initial);
+  return (
+    <SettingsField
+      spec={COUNTRY}
+      value={value}
+      onChange={(next) => {
+        onCommit(next);
+        setValue(next);
+      }}
+    />
+  );
+}
+
+function renderRow(initial: unknown) {
+  const onCommit = vi.fn();
+  const view = render(<Row initial={initial} onCommit={onCommit} />);
+  const input = view.container.querySelector('input') as HTMLInputElement;
+  return { ...view, input, onCommit };
+}
+
+afterEach(cleanup);
+
+describe('SettingsField — a domain-bearing select shows the option name for a stored code', () => {
+  it('a stored DE reads as its name in the box', () => {
+    const { input } = renderRow('DE');
+    expect(input.value).toBe('Germany (DE)');
+  });
+
+  it('picking a named option stores its code and keeps the name in the box', () => {
+    const { input, onCommit } = renderRow('US');
+    // A datalist pick writes the suggestion's `value` attribute into the box.
+    fireEvent.change(input, { target: { value: 'France (FR)' } });
+    expect(onCommit).toHaveBeenLastCalledWith('FR');
+    expect(input.value).toBe('France (FR)');
+  });
+
+  it('a code typed by hand is committed as typed and reads as its name on blur', () => {
+    const { input, onCommit } = renderRow(null);
+    fireEvent.change(input, { target: { value: 'DE' } });
+    expect(onCommit).toHaveBeenLastCalledWith('DE');
+    expect(input.value).toBe('DE');
+    fireEvent.blur(input);
+    expect(input.value).toBe('Germany (DE)');
+  });
+
+  it('a free-text value outside the table is still committed verbatim', () => {
+    const { input, onCommit } = renderRow('DE');
+    fireEvent.change(input, { target: { value: 'CH' } });
+    expect(onCommit).toHaveBeenLastCalledWith('CH');
+    fireEvent.change(input, { target: { value: 'Germ' } });
+    expect(onCommit).toHaveBeenLastCalledWith('Germ');
+    fireEvent.blur(input);
+    // No option carries it, so it shows as itself.
+    expect(input.value).toBe('Germ');
+  });
+
+  it('an unmatched stored value shows verbatim, and an emptied box is unset', () => {
+    const { input, onCommit } = renderRow('CH');
+    expect(input.value).toBe('CH');
+    fireEvent.change(input, { target: { value: '' } });
+    expect(onCommit).toHaveBeenLastCalledWith(null);
+    expect(input.value).toBe('');
+  });
+
+  it('a value changed from outside the box shows as its name', () => {
+    // A reset or a re-read after save hands the row a new value while the
+    // admin's last pick is still held in the box.
+    const { container, rerender } = render(
+      <SettingsField spec={COUNTRY} value="US" onChange={() => {}} />,
+    );
+    const box = container.querySelector('input') as HTMLInputElement;
+    fireEvent.change(box, { target: { value: 'United States (US)' } });
+    rerender(<SettingsField spec={COUNTRY} value="DE" onChange={() => {}} />);
+    expect(box.value).toBe('Germany (DE)');
+  });
+});
@@ -159,14 +159,16 @@ describe('SettingsField — `select` follows the specifier\'s valueDomain declar
       const input = container.querySelector('input');
       expect(input, 'a domain-bearing select must render an editable control').not.toBeNull();
 
-      // The curated table survives — as SUGGESTIONS, not as the boundary.
+      // The curated table survives — as SUGGESTIONS, not as the boundary. They
+      // are offered by name; the name maps back to its code on pick
+      // (`SettingsField.domainOptionName-28068.test.tsx`).
       const listId = input!.getAttribute('list');
       const datalist = container.querySelector('datalist');
       expect(datalist).not.toBeNull();
       expect(datalist!.id).toBe(listId);
       expect(
         Array.from(datalist!.querySelectorAll('option')).map((o) => o.getAttribute('value')),
-      ).toEqual(optionValues(spec));
+      ).toEqual((spec.options ?? []).map((o) => o.label));
 
       // …and free text outside them is committed verbatim, not swallowed.
       fireEvent.change(input!, { target: { value: probe } });