fix(detail): multi-value lookup is selectable in inline edit (#2957)

baozhoutao · claude · web-flow · commit 29ba3a8d6f58 · 2026-07-29T20:14:33.000+08:00
The pencil affordance on a detail page rendered a `multiple: true` lookup as
a SINGLE-select picker: picking a record replaced the value and closed the
popover, so a second record could never be added.

Root cause: `DetailSection` (and `HeaderHighlight`) enriched each view field
from the object schema with a hand-written key whitelist that never included
`multiple` — nor any of the other relational/picker keys the form path gets
for free (display/description/id fields, quick-create, record-picker columns
/ page size / base filters, people-picker config, dependent-lookup gating).
The two whitelists had already drifted apart from each other twice.

Both now go through a shared `enrichDetailField`, which carries the documented
key set (view field always wins). With `multiple` flowing through, the select
branch of `InlineFieldInput` must stop flattening the value with `String()`,
so a multi-value picklist gets the chip picker too (`multiselect` included).

Co-authored-by: Claude Opus 5 &lt;noreply@anthropic.com&gt;
diff --git a/packages/plugin-detail/src/DetailSection.tsx b/packages/plugin-detail/src/DetailSection.tsx
@@ -34,6 +34,7 @@ import { useSafeFieldLabel } from '@object-ui/react';
 import { PermissionFacetLink } from './renderers/PermissionFacetLink';
 import { NON_EDITABLE_SYSTEM_FIELDS } from './systemFields';
 import { InlineFieldInput, TEXTUAL_REF_FALLBACK_TYPES } from './InlineFieldInput';
+import { enrichDetailField } from './fieldEnrichment';
 
 /**
  * Section-header icon. `fieldGroups[].icon` declares a Lucide name (spec),
@@ -212,28 +213,7 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
     // like select options, currency code, lookup target, etc. are
     // available in either mode.
     const objectDefField = objectSchema?.fields?.[field.name];
-    const enrichedField: Record<string, any> = { ...field };
-    if (objectDefField) {
-      if (!field.type && objectDefField.type) enrichedField.type = objectDefField.type;
-      if (objectDefField.options && !enrichedField.options) enrichedField.options = objectDefField.options;
-      if (objectDefField.currency && !enrichedField.currency) enrichedField.currency = objectDefField.currency;
-      if (objectDefField.precision !== undefined && enrichedField.precision === undefined) enrichedField.precision = objectDefField.precision;
-      if ((objectDefField as any).scale !== undefined && (enrichedField as any).scale === undefined) (enrichedField as any).scale = (objectDefField as any).scale;
-      // Numeric range/step constraints (objectui#2572 item 3) — without these
-      // the metadata's `min: 0` never reaches the numeric edit widgets.
-      if ((objectDefField as any).min !== undefined && (enrichedField as any).min === undefined) (enrichedField as any).min = (objectDefField as any).min;
-      if ((objectDefField as any).max !== undefined && (enrichedField as any).max === undefined) (enrichedField as any).max = (objectDefField as any).max;
-      if ((objectDefField as any).step !== undefined && (enrichedField as any).step === undefined) (enrichedField as any).step = (objectDefField as any).step;
-      if (objectDefField.format && !enrichedField.format) enrichedField.format = objectDefField.format;
-      // Per-field widget override (ADR-0056 P2) — carry it from the object
-      // metadata so the inline-edit widget branch (and read cell) can honor a
-      // structured editor even when the synthesized section field didn't include it.
-      if ((objectDefField as any).widget && !enrichedField.widget) enrichedField.widget = (objectDefField as any).widget;
-      const refTarget = objectDefField.reference_to || objectDefField.reference;
-      if (refTarget && !enrichedField.reference_to) enrichedField.reference_to = refTarget;
-      if (objectDefField.reference_field && !enrichedField.reference_field) enrichedField.reference_field = objectDefField.reference_field;
-      if ((objectDefField as any).dueLike !== undefined && enrichedField.dueLike === undefined) enrichedField.dueLike = (objectDefField as any).dueLike;
-    }
+    const enrichedField = enrichDetailField(field as Record<string, any>, objectDefField);
     if (objectName && Array.isArray(enrichedField.options) && enrichedField.options.length > 0) {
       enrichedField.options = translateOptions(objectName, field.name, enrichedField.options as any);
     }
diff --git a/packages/plugin-detail/src/HeaderHighlight.tsx b/packages/plugin-detail/src/HeaderHighlight.tsx
@@ -20,6 +20,7 @@ import { getCellRenderer, resolveCellRendererType } from '@object-ui/fields';
 import { useSafeFieldLabel, useInlineEdit } from '@object-ui/react';
 import { Check, X, Pencil } from 'lucide-react';
 import { InlineFieldInput, TEXTUAL_REF_FALLBACK_TYPES } from './InlineFieldInput';
+import { enrichDetailField } from './fieldEnrichment';
 import { NON_EDITABLE_SYSTEM_FIELDS } from './systemFields';
 import { useDetailTranslation } from './useDetailTranslation';
 
@@ -82,35 +83,15 @@ export const HeaderHighlight: React.FC<HeaderHighlightProps> = ({
             // Enrich field metadata from objectSchema
             const objectDefField = objectSchema?.fields?.[field.name];
             const resolvedType = field.type || objectDefField?.type;
-            // Backend object schemas use the ObjectStack-convention `reference`
-            // key (DetailSection normalizes the same pair) — without it the
-            // lookup editor has no target object to hydrate or search against.
-            const refTarget =
-              objectDefField?.reference_to || (objectDefField as any)?.reference;
-            const enrichedField = {
-              name: field.name,
-              label: field.label,
-              type: resolvedType || 'text',
-              ...(objectDefField?.options && { options: objectDefField.options }),
-              ...(objectDefField?.currency && { currency: objectDefField.currency }),
-              // The SPEC channel for a per-field currency (a bare `currency`
-              // key is designer/DB-only) — resolveFieldCurrency reads
-              // currencyConfig.defaultCurrency second (#2548).
-              ...(objectDefField?.currencyConfig && { currencyConfig: objectDefField.currencyConfig }),
-              ...(objectDefField?.precision !== undefined && { precision: objectDefField.precision }),
-              ...((objectDefField as any)?.scale !== undefined && { scale: (objectDefField as any).scale }),
-              // Numeric range/step constraints (objectui#2572 item 3) — keep in
-              // sync with DetailSection's enrichment so both editors honor them.
-              ...((objectDefField as any)?.min !== undefined && { min: (objectDefField as any).min }),
-              ...((objectDefField as any)?.max !== undefined && { max: (objectDefField as any).max }),
-              ...((objectDefField as any)?.step !== undefined && { step: (objectDefField as any).step }),
-              ...(objectDefField?.format && { format: objectDefField.format }),
-              ...(refTarget && { reference_to: refTarget }),
-              ...((objectDefField as any)?.reference_field && {
-                reference_field: (objectDefField as any).reference_field,
-              }),
-              ...((objectDefField as any)?.widget && { widget: (objectDefField as any).widget }),
-            };
+            // Shared with DetailSection (`enrichDetailField`) so the highlights
+            // strip and the details body resolve an identical field shape —
+            // including the relational keys a lookup picker needs (`multiple`,
+            // display/id fields, picker config), and the `reference` /
+            // `reference_to` spelling pair backend schemas use.
+            const enrichedField = enrichDetailField(
+              { name: field.name, label: field.label, type: resolvedType || 'text' },
+              objectDefField,
+            );
 
             // Live value = the user's draft edit for this field, else the record
             // value. Read as `draft[name] ?? data[name]` (objectui#2407 P2).
diff --git a/packages/plugin-detail/src/InlineFieldInput.tsx b/packages/plugin-detail/src/InlineFieldInput.tsx
@@ -113,9 +113,23 @@ export const InlineFieldInput: React.FC<InlineFieldInputProps> = ({
     );
   }
   // Picklist → real Select widget so users see localized option labels and
-  // can't free-type invalid values.
-  if (editType === 'select' && Array.isArray(field.options) && field.options.length > 0) {
-    return (
+  // can't free-type invalid values. A `multiple` picklist (spec canon: `select`
+  // + `multiple: true`; `multiselect` is the widget-level alias) selects
+  // zero-or-more values — `SelectField` delegates to the chip picker, so the
+  // value must stay an ARRAY here instead of being flattened by `String()`.
+  const isMultiSelect = editType === 'multiselect' || !!field.multiple;
+  if (
+    (editType === 'select' || editType === 'multiselect') &&
+    Array.isArray(field.options) &&
+    field.options.length > 0
+  ) {
+    return isMultiSelect ? (
+      <SelectField
+        field={{ ...(field as any), multiple: true }}
+        value={Array.isArray(value) ? value : value == null || value === '' ? [] : [value]}
+        onChange={(v) => onChange(v)}
+      />
+    ) : (
       <SelectField
         field={field as any}
         value={value == null ? '' : String(value)}
diff --git a/packages/plugin-detail/src/__tests__/DetailSection.multiValueInlineEdit.test.tsx b/packages/plugin-detail/src/__tests__/DetailSection.multiValueInlineEdit.test.tsx
@@ -0,0 +1,158 @@
+/**
+ * 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.
+ */
+
+/**
+ * Multi-value fields in inline edit (the pencil affordance on a detail page).
+ *
+ * Regression: `DetailSection`'s field enrichment copied a hand-written key
+ * whitelist that never included `multiple`, so a lookup declared
+ * `multiple: true` reached the picker as a SINGLE-select field — picking a
+ * record replaced the value and closed the popover, making it impossible to
+ * select more than one. The read cell showed one chip for the same reason.
+ *
+ * The enrichment now goes through the shared `enrichDetailField`, which carries
+ * `multiple` (and the rest of the picker configuration) from the object schema.
+ */
+
+import * as React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { DetailSection } from '../DetailSection';
+import type { DetailViewSection } from '@object-ui/types';
+
+const tags = [
+  { id: 't1', name: 'Urgent' },
+  { id: 't2', name: 'Backlog' },
+];
+
+function makeDataSource() {
+  const find = vi.fn(async () => ({ data: tags, total: tags.length }));
+  return { find } as any;
+}
+
+const objectSchema = {
+  fields: {
+    tags: {
+      type: 'lookup',
+      reference_to: 'tags',
+      display_field: 'name',
+      multiple: true,
+    },
+    priority: {
+      type: 'select',
+      multiple: true,
+      options: [
+        { label: 'High', value: 'high' },
+        { label: 'Low', value: 'low' },
+      ],
+    },
+  },
+};
+
+const section = {
+  fields: [{ name: 'tags', label: 'Tags' }],
+} as DetailViewSection;
+
+/**
+ * Stand-in for `DetailView`'s inline-edit state: it merges the draft back into
+ * `data` on every change, exactly as `{ ...data, ...editedValues }` does, so a
+ * second pick sees the first one.
+ */
+function EditingHost({
+  onChange,
+  initial,
+  fields = section,
+}: {
+  onChange: (name: string, value: any) => void;
+  initial: Record<string, any>;
+  fields?: DetailViewSection;
+}) {
+  const [data, setData] = React.useState(initial);
+  return (
+    <DetailSection
+      section={fields}
+      data={data}
+      objectSchema={objectSchema}
+      dataSource={makeDataSource()}
+      isEditing
+      onFieldChange={(name, value) => {
+        setData((prev) => ({ ...prev, [name]: value }));
+        onChange(name, value);
+      }}
+    />
+  );
+}
+
+beforeEach(() => {
+  try {
+    localStorage.clear();
+  } catch {
+    /* happy-dom */
+  }
+});
+
+describe('DetailSection inline edit — multi-value lookup', () => {
+  it('accumulates picks instead of replacing the previous one', async () => {
+    const onChange = vi.fn();
+    render(<EditingHost onChange={onChange} initial={{ tags: [] }} />);
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('lookup-trigger-tags'));
+    });
+
+    await waitFor(() => expect(screen.getByRole('option', { name: /Urgent/ })).toBeInTheDocument());
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('option', { name: /Urgent/ }));
+    });
+    expect(onChange).toHaveBeenLastCalledWith('tags', ['t1']);
+
+    // The popover stays open in multi mode — the second pick must ADD to the
+    // value, which is the exact step that was impossible before the fix.
+    await act(async () => {
+      fireEvent.click(screen.getByRole('option', { name: /Backlog/ }));
+    });
+    expect(onChange).toHaveBeenLastCalledWith('tags', ['t1', 't2']);
+  });
+
+  it('renders every selected record as a chip, including `$expand`-ed values', async () => {
+    render(
+      <EditingHost
+        onChange={vi.fn()}
+        initial={{ tags: [{ id: 't1', name: 'Urgent' }, { id: 't2', name: 'Backlog' }] }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Urgent')).toBeInTheDocument();
+      expect(screen.getByText('Backlog')).toBeInTheDocument();
+    });
+  });
+
+  it('renders a multi-value picklist as the chip picker, not a stringified value', async () => {
+    const onChange = vi.fn();
+    render(
+      <EditingHost
+        onChange={onChange}
+        initial={{ priority: ['high'] }}
+        fields={{ fields: [{ name: 'priority', label: 'Priority' }] } as DetailViewSection}
+      />,
+    );
+
+    // A single-select dropdown would have coerced the array through String();
+    // the multi picker offers every option as a toggleable chip.
+    const high = screen.getByTestId('multiselect-option-high');
+    expect(high).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByTestId('multiselect-option-low')).toHaveAttribute('aria-pressed', 'false');
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('multiselect-option-low'));
+    });
+    expect(onChange).toHaveBeenLastCalledWith('priority', ['high', 'low']);
+  });
+});
diff --git a/packages/plugin-detail/src/__tests__/fieldEnrichment.test.ts b/packages/plugin-detail/src/__tests__/fieldEnrichment.test.ts
@@ -0,0 +1,64 @@
+/**
+ * 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.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { enrichDetailField } from '../fieldEnrichment';
+
+describe('enrichDetailField', () => {
+  it('carries the relational picker configuration a lookup editor needs', () => {
+    const enriched = enrichDetailField(
+      { name: 'tags', label: 'Tags' },
+      {
+        type: 'lookup',
+        reference: 'tags',
+        multiple: true,
+        display_field: 'name',
+        id_field: 'code',
+        lookup_filters: [{ field: 'active', operator: 'eq', value: true }],
+        depends_on: ['category'],
+        picker: 'search',
+      },
+    );
+
+    expect(enriched).toMatchObject({
+      type: 'lookup',
+      // ObjectStack's `reference` spelling normalizes onto the canonical key.
+      reference_to: 'tags',
+      multiple: true,
+      display_field: 'name',
+      id_field: 'code',
+      picker: 'search',
+      depends_on: ['category'],
+    });
+    expect(enriched.lookup_filters).toEqual([{ field: 'active', operator: 'eq', value: true }]);
+  });
+
+  it('keeps the view field as the override — the schema only fills gaps', () => {
+    const enriched = enrichDetailField(
+      { name: 'amount', type: 'currency', currency: 'EUR' },
+      { type: 'number', currency: 'USD', scale: 2, min: 0 },
+    );
+
+    expect(enriched.type).toBe('currency');
+    expect(enriched.currency).toBe('EUR');
+    expect(enriched.scale).toBe(2);
+    expect(enriched.min).toBe(0);
+  });
+
+  it('never copies `readonly` (the hosts gate editability off the schema directly)', () => {
+    const enriched = enrichDetailField({ name: 'code' }, { type: 'text', readonly: true });
+    expect(enriched.readonly).toBeUndefined();
+  });
+
+  it('is a no-op passthrough when the field has no object metadata', () => {
+    expect(enrichDetailField({ name: 'ad_hoc', type: 'text' }, undefined)).toEqual({
+      name: 'ad_hoc',
+      type: 'text',
+    });
+  });
+});
diff --git a/packages/plugin-detail/src/fieldEnrichment.ts b/packages/plugin-detail/src/fieldEnrichment.ts
