fix(inline-field): commit first select option when empty + show option label in read mode

src/pages/businessUnitEdit/InlineField.test.tsx

@@ -51,3 +51,48 @@ describe('InlineField', () => {
     expect(screen.queryByRole('textbox')).toBeNull();
   });
 });
+
+describe('InlineField (select)', () => {
+  const clusters = [
+    { value: 'c1', label: 'ZEBRA' },
+    { value: 'c2', label: 'CARMEN' },
+  ];
+  const setupSelect = (value = '') => {
+    const onCommit = vi.fn();
+    render(
+      <InlineField
+        name="cluster"
+        label="Cluster"
+        type="select"
+        options={clusters}
+        value={value}
+        onCommit={onCommit}
+      />,
+    );
+    return { onCommit };
+  };
+
+  it('shows the option label, not the raw stored value, in read mode', () => {
+    setupSelect('c2');
+    expect(screen.getByRole('button', { name: 'CARMEN' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'c2' })).toBeNull();
+  });
+
+  it('renders a non-committing prompt option so the first real option is selectable when empty', async () => {
+    const user = userEvent.setup();
+    setupSelect('');
+    await user.click(screen.getByRole('button', { name: /set cluster/i }));
+    // an empty-valued prompt sits at the top; without it the browser would show
+    // the first real option as already-selected and clicking it fires no change.
+    const prompt = screen.getByRole('option', { name: /set cluster/i });
+    expect(prompt).toHaveValue('');
+  });
+
+  it('commits the chosen option value', async () => {
+    const user = userEvent.setup();
+    const { onCommit } = setupSelect('');
+    await user.click(screen.getByRole('button', { name: /set cluster/i }));
+    await user.selectOptions(screen.getByRole('combobox', { name: 'Cluster' }), 'c1');
+    expect(onCommit).toHaveBeenCalledWith('cluster', 'c1');
+  });
+});

src/pages/businessUnitEdit/InlineField.tsx

@@ -70,7 +70,14 @@ export function InlineField({
     }
   };
 
-  const displayValue = value.trim() ? value : null;
+  const promptText = placeholder || `Set ${label.toLowerCase()}…`;
+  // Selects store the option value (e.g. a UUID); show its human label in read mode.
+  const displayValue =
+    type === 'select'
+      ? (options?.find((o) => o.value === value)?.label ?? (value.trim() ? value : null))
+      : value.trim()
+        ? value
+        : null;
 
   return (
     <div className="grid grid-cols-1 gap-0.5 py-1.5 sm:grid-cols-[150px_1fr] sm:items-start sm:gap-3">
@@ -91,6 +98,12 @@ export function InlineField({
               onBlur={cancel}
               className={inputClass}
             >
+              {/* Empty prompt so an unset select shows the placeholder (not the
+                  first option as pre-selected) — otherwise picking that first
+                  option fires no change event and never commits. */}
+              <option value="" disabled>
+                {promptText}
+              </option>
               {options?.map((o) => (
                 <option key={o.value} value={o.value}>
                   {o.label}
@@ -133,7 +146,7 @@ export function InlineField({
               mono && displayValue && 'font-mono tabular-nums',
             )}
           >
-            <span className="whitespace-pre-line">{displayValue ?? (placeholder || `Set ${label.toLowerCase()}…`)}</span>
+            <span className="whitespace-pre-line">{displayValue ?? promptText}</span>
             {!disabled && (
               <Pencil className="text-muted-foreground/60 ml-auto size-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
             )}