From 5a0c23abaf899f2006dcee2501851fc041e222a7 Mon Sep 17 00:00:00 2001
From: Martin Castro Laminrs <mcastro@laminr.ai>
Date: Sun, 31 May 2026 12:28:54 +0200
Subject: [PATCH] feat(spa): render raw_id_fields and radio_fields hints (#626)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The wire contract already declared `WidgetHint = 'radio' | 'raw_id'
| 'password'`, but only `'password'` had a render path; the other
two were silently no-ops — a ModelAdmin declaring `raw_id_fields =
('owner',)` got the autocomplete picker anyway (the very thing the
consumer was OPTING OUT of), and `radio_fields = {"status":
admin.HORIZONTAL}` rendered as a `<select>`.

This adds the two render branches in `FieldInput.tsx`:

- **`widget === 'raw_id'` on a `foreignkey`** → plain pk text input
  (no autocomplete request, no popup picker) + a small "Lookup ↗"
  link that opens the FK target's changelist in a new tab so the
  operator can find the pk by sight. Matches Django HTML admin's
  approach for `raw_id_fields` on FKs with too many rows to
  autocomplete. The link is omitted when `field.to` is absent (FK
  target not admin-registered).
- **`widget === 'radio'` on a `choice` with `choices`** → inline
  radio bank under a `<div role="radiogroup">`. Emits the original
  choice value (not the stringified key) so number/bool choices
  round-trip.

M2M + `raw_id` is intentionally not handled here (legacy admin
renders a CSV pk list textarea — separate follow-up); the guard
`field.type === 'foreignkey'` lets M2M fall through to the existing
M2M branch.

InlineEditor needs no change: its `InlineCellInput` already
text-inputs anything non-password/boolean/numeric, which IS the
`raw_id` rendering for a table-shaped inline cell.

Locks: 6 new vitests in `FieldInput.test.tsx` cover the rendering,
the lookup-link presence/absence, the onChange pk emission, the
clear-to-null path, and the radio group's checked + onChange
behaviour.

Closes #626.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../packages/form/src/FieldInput.test.tsx     | 134 ++++++++++++++++++
 frontend/packages/form/src/FieldInput.tsx     |  69 +++++++++
 2 files changed, 203 insertions(+)

diff --git a/frontend/packages/form/src/FieldInput.test.tsx b/frontend/packages/form/src/FieldInput.test.tsx
index 1d2778a..a3e499c 100644
--- a/frontend/packages/form/src/FieldInput.test.tsx
+++ b/frontend/packages/form/src/FieldInput.test.tsx
@@ -225,3 +225,137 @@ describe('FieldInput — related "+add" affordance (#383)', () => {
     expect(screen.queryByRole('button', { name: /Add/ })).not.toBeInTheDocument();
   });
 });
+
+describe('FieldInput raw_id widget (#626)', () => {
+  it('renders a plain text input — NOT the autocomplete picker', () => {
+    render(
+      <FieldInput
+        name="owner"
+        field={field({
+          type: 'foreignkey',
+          widget: 'raw_id',
+          to: { app_label: 'auth', model_name: 'user' },
+        })}
+        value={null}
+        error={undefined}
+        onChange={() => {}}
+      />,
+    );
+    const input = screen.getByLabelText('F') as HTMLInputElement;
+    expect(input).toHaveAttribute('type', 'text');
+    // Defining feature: no autocomplete + numeric inputMode for the pk.
+    expect(input).toHaveAttribute('inputmode', 'numeric');
+  });
+
+  it('reports the typed pk via onChange', () => {
+    const onChange = vi.fn();
+    render(
+      <FieldInput
+        name="owner"
+        field={field({
+          type: 'foreignkey',
+          widget: 'raw_id',
+          to: { app_label: 'auth', model_name: 'user' },
+        })}
+        value={null}
+        error={undefined}
+        onChange={onChange}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText('F'), { target: { value: '42' } });
+    expect(onChange).toHaveBeenCalledWith('42');
+  });
+
+  it('emits null when the operator clears a previously-filled pk', () => {
+    const onChange = vi.fn();
+    render(
+      <FieldInput
+        name="owner"
+        field={field({
+          type: 'foreignkey',
+          widget: 'raw_id',
+          to: { app_label: 'auth', model_name: 'user' },
+        })}
+        value={'42'}
+        error={undefined}
+        onChange={onChange}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText('F'), { target: { value: '' } });
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  it('shows a Lookup link to the FK target changelist (opens in a new tab)', () => {
+    render(
+      <FieldInput
+        name="owner"
+        field={field({
+          type: 'foreignkey',
+          widget: 'raw_id',
+          to: { app_label: 'auth', model_name: 'user' },
+        })}
+        value={null}
+        error={undefined}
+        onChange={() => {}}
+      />,
+    );
+    const lookup = screen.getByRole('link', { name: /Look up related object/ });
+    expect(lookup).toHaveAttribute('href', '../../auth/user/');
+    expect(lookup).toHaveAttribute('target', '_blank');
+    expect(lookup).toHaveAttribute('rel', expect.stringContaining('noopener') as unknown as string);
+  });
+
+  it('omits the Lookup link when the FK target is not admin-registered (no `to`)', () => {
+    render(
+      <FieldInput
+        name="owner"
+        field={field({ type: 'foreignkey', widget: 'raw_id' })}
+        value={null}
+        error={undefined}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.queryByRole('link', { name: /Look up/ })).not.toBeInTheDocument();
+  });
+});
+
+describe('FieldInput radio widget (#626)', () => {
+  const choices = [
+    { value: 'draft', label: 'Draft' },
+    { value: 'published', label: 'Published' },
+    { value: 'archived', label: 'Archived' },
+  ];
+
+  it('renders one radio input per choice, grouped under a radiogroup', () => {
+    render(
+      <FieldInput
+        name="status"
+        field={field({ type: 'choice', widget: 'radio', choices })}
+        value={'published'}
+        error={undefined}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+    expect(screen.getAllByRole('radio')).toHaveLength(3);
+    // The currently-selected option is checked.
+    const checked = screen.getAllByRole('radio').find((r) => (r as HTMLInputElement).checked);
+    expect(checked).toBeDefined();
+    expect((checked as HTMLInputElement).value).toBe('published');
+  });
+
+  it('emits the original (untyped) choice value via onChange', () => {
+    const onChange = vi.fn();
+    render(
+      <FieldInput
+        name="status"
+        field={field({ type: 'choice', widget: 'radio', choices })}
+        value={null}
+        error={undefined}
+        onChange={onChange}
+      />,
+    );
+    fireEvent.click(screen.getByLabelText('Archived'));
+    expect(onChange).toHaveBeenCalledWith('archived');
+  });
+});
diff --git a/frontend/packages/form/src/FieldInput.tsx b/frontend/packages/form/src/FieldInput.tsx
index f533d39..289d6eb 100644
--- a/frontend/packages/form/src/FieldInput.tsx
+++ b/frontend/packages/form/src/FieldInput.tsx
@@ -69,6 +69,75 @@ export function FieldInput({ name, field, value, error, onChange }: FieldInputPr
         className={base}
       />
     );
+  } else if (field.widget === 'raw_id' && field.type === 'foreignkey') {
+    // raw_id_fields (#626 / #251). The consumer explicitly OPTED OUT
+    // of an autocomplete picker — typically because the FK target has
+    // millions of rows and `get_search_results` is too expensive.
+    // Match Django's HTML admin: a bare pk text input, plus a small
+    // "lookup" link that opens the FK target's changelist in a new
+    // tab so the operator can find the pk by sight. No autocomplete
+    // request fires. The wire ships `field.to = {app_label, model_name}`
+    // when the FK target is admin-registered (`#184` parity); when it
+    // isn't, we render the input only.
+    //
+    // M2M + `raw_id` is intentionally NOT handled here; falls through
+    // to the existing M2M branch (CSV pk list is a separate follow-up).
+    const target = field.to;
+    control = (
+      <div className="flex items-center gap-2">
+        <input
+          id={id}
+          type="text"
+          inputMode="numeric"
+          value={value == null ? '' : String(value)}
+          onChange={(e) => onChange(e.target.value === '' ? null : e.target.value)}
+          className={base}
+        />
+        {target && (
+          <a
+            // Same-window? No — popup is the legacy admin's contract.
+            // Open the changelist in a new tab; the operator copies
+            // the pk back into the input.
+            href={`../../${target.app_label}/${target.model_name}/`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="shrink-0 rounded border border-gray-300 px-2 py-1 text-xs text-gray-700 hover:bg-gray-50"
+            aria-label="Look up related object in a new tab"
+          >
+            Lookup ↗
+          </a>
+        )}
+      </div>
+    );
+  } else if (field.widget === 'radio' && field.type === 'choice' && field.choices) {
+    // radio_fields (#626 / #251). The consumer explicitly chose inline
+    // radio buttons over the default `<select>` — typically because the
+    // option set is small (2-5) and a radio bank is faster to scan than
+    // a click + dropdown. The wire ships the choices list verbatim;
+    // render one labeled radio per option. Falls through to the choice
+    // branch when `field.choices` is empty (defence — choice fields
+    // should always carry choices, but the type allows undefined).
+    const radioValue = value == null ? '' : String(value);
+    control = (
+      <div role="radiogroup" aria-labelledby={`${id}-label`} className="flex flex-wrap gap-x-4 gap-y-2">
+        {field.choices.map((c) => {
+          const key = String(c.value);
+          return (
+            <label key={key} className="flex items-center gap-1.5 text-sm">
+              <input
+                type="radio"
+                name={id}
+                value={key}
+                checked={radioValue === key}
+                onChange={() => onChange(c.value)}
+                className="h-4 w-4 text-gray-700 focus:ring-gray-500"
+              />
+              {c.label}
+            </label>
+          );
+        })}
+      </div>
+    );
   } else if (field.type === 'boolean') {
     control = (
       <Checkbox id={id} checked={value === true} onChange={(e) => onChange(e.target.checked)} />