@object-ui/fields 17.2.0 → 17.5.0

package/src/widgets/ImageField.maxSize.test.tsx

@@ -0,0 +1,154 @@
+/**
+ * ImageField — a declared `maxSize` is enforced BEFORE any upload starts
+ * (objectui#4141).
+ *
+ * The defect this pins: `paramToField` copies `maxSize` onto the field config
+ * for every param type, so the image widget RECEIVES the constraint — it just
+ * never read it. An oversized pick therefore fired the whole
+ * `presigned → PUT → complete` chain and rendered a preview, while the sibling
+ * file param rejected the same pick with zero uploads.
+ *
+ * So the assertion that matters is **zero upload attempts**, not "no preview":
+ * a widget that uploads the bytes and then hides the thumbnail has still
+ * stored an over-limit file. The spy sits on the `UploadProvider` adapter —
+ * the layer that performs the presigned request — so a call there IS the
+ * network attempt.
+ *
+ * Two upload entry points exist on this widget and both are covered here:
+ *   1. the native picker (`handleFileChange`, single and `multiple`);
+ *   2. the crop dialog's confirm (`handleCropConfirm`), which uploads a
+ *      freshly re-encoded PNG blob — canvas re-encoding can push a crop of an
+ *      in-limit JPEG *over* the limit, so it is a real second door.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { UploadProvider, type UploadAdapter } from '@object-ui/providers';
+import { ImageField } from './ImageField';
+// Imported at module scope (not awaited in a hook) so the widget's
+// `React.lazy(() => import('./ImageCropperDialog'))` resolves from the ESM
+// cache instead of racing RTL's 1000ms `findBy` budget — AGENTS.md §测试纪律.
+import './ImageCropperDialog';
+
+const MB = 1024 * 1024;
+
+/** A File whose reported `size` is the declared one (constructor bytes are not). */
+function imageOfSize(name: string, bytes: number): File {
+  const file = new File(['x'], name, { type: 'image/png' });
+  Object.defineProperty(file, 'size', { value: bytes });
+  return file;
+}
+
+function blobOfSize(bytes: number): Blob {
+  const blob = new Blob(['x'], { type: 'image/png' });
+  Object.defineProperty(blob, 'size', { value: bytes });
+  return blob;
+}
+
+function renderField(field: Record<string, unknown>, value: unknown = undefined) {
+  const upload = vi.fn(async (f: File | Blob) => ({
+    url: 'https://cdn.example/uploaded.png',
+    name: (f as File).name ?? 'cropped.png',
+    size: f.size,
+    mimeType: f.type || 'image/png',
+  }));
+  const adapter: UploadAdapter = { name: 'spy', upload };
+  const onChange = vi.fn();
+  render(
+    <UploadProvider adapter={adapter}>
+      <ImageField field={field as any} value={value} onChange={onChange} />
+    </UploadProvider>,
+  );
+  return { upload, onChange, input: document.querySelector('input[type="file"]') as HTMLInputElement };
+}
+
+describe('ImageField — client-side maxSize guard (#4141)', () => {
+  it('never reaches the upload layer for a pick over the declared maxSize', async () => {
+    const { upload, onChange, input } = renderField({ name: 'p_cover', maxSize: 5 * MB });
+
+    fireEvent.change(input, { target: { files: [imageOfSize('huge.png', 6.3 * MB)] } });
+
+    // The message is the proof the guard ran; the spy is the proof nothing was sent.
+    await screen.findByText(/"huge\.png" exceeds max size \(5\.0 MB\)/);
+    expect(upload).not.toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('still uploads a pick inside the declared maxSize', async () => {
+    const { upload, onChange, input } = renderField({ name: 'p_cover', maxSize: 5 * MB });
+
+    fireEvent.change(input, { target: { files: [imageOfSize('ok.png', 1 * MB)] } });
+
+    await waitFor(() => expect(onChange).toHaveBeenCalled());
+    expect(upload).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText(/exceeds max size/)).toBeNull();
+  });
+
+  it('uploads unrestricted when the param declares no maxSize', async () => {
+    const { upload, onChange, input } = renderField({ name: 'p_cover' });
+
+    fireEvent.change(input, { target: { files: [imageOfSize('enormous.png', 500 * MB)] } });
+
+    await waitFor(() => expect(onChange).toHaveBeenCalled());
+    expect(upload).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText(/exceeds max size/)).toBeNull();
+  });
+
+  it('rejects only the oversized picks of a multi-select and uploads the rest', async () => {
+    const { upload, onChange, input } = renderField({ name: 'p_gallery', multiple: true, maxSize: 5 * MB });
+
+    fireEvent.change(input, {
+      target: { files: [imageOfSize('small.png', 1 * MB), imageOfSize('huge.png', 6.3 * MB)] },
+    });
+
+    await waitFor(() => expect(onChange).toHaveBeenCalled());
+    expect(upload).toHaveBeenCalledTimes(1);
+    expect((upload.mock.calls[0][0] as File).name).toBe('small.png');
+    expect(screen.getByText(/"huge\.png" exceeds max size \(5\.0 MB\)/)).toBeTruthy();
+  });
+
+  it('guards the crop dialog too — an oversized re-encode is never uploaded', async () => {
+    const existing = { name: 'cover.png', url: 'https://cdn.example/cover.png', mime_type: 'image/png' };
+    const { upload, onChange } = renderField({ name: 'p_cover', maxSize: 5 * MB, crop: true }, existing);
+
+    fireEvent.click(screen.getByTestId('image-field-crop-0'));
+    const confirm = await screen.findByTestId('fake-crop-confirm');
+    fireEvent.click(confirm);
+
+    await screen.findByText(/exceeds max size \(5\.0 MB\)/);
+    expect(upload).not.toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('still uploads a crop that fits inside the declared maxSize', async () => {
+    const existing = { name: 'cover.png', url: 'https://cdn.example/cover.png', mime_type: 'image/png' };
+    const { upload, onChange } = renderField({ name: 'p_cover', maxSize: 5 * MB, crop: true }, existing);
+
+    fireEvent.click(screen.getByTestId('image-field-crop-0'));
+    fireEvent.click(await screen.findByTestId('fake-crop-confirm-small'));
+
+    await waitFor(() => expect(onChange).toHaveBeenCalled());
+    expect(upload).toHaveBeenCalledTimes(1);
+  });
+});
+
+/**
+ * The real cropper is a canvas + `toBlob` pipeline that happy-dom cannot run;
+ * this stand-in drives the ONE contract ImageField has with it — `onConfirm`
+ * hands back a blob and a name — with a blob size on either side of the limit.
+ */
+vi.mock('./ImageCropperDialog', () => ({
+  ImageCropperDialog: ({ onConfirm }: { onConfirm: (blob: Blob, name: string) => void }) => (
+    <div>
+      <button type="button" data-testid="fake-crop-confirm" onClick={() => onConfirm(blobOfSize(6.3 * MB), 'cover.png')}>
+        confirm big
+      </button>
+      <button
+        type="button"
+        data-testid="fake-crop-confirm-small"
+        onClick={() => onConfirm(blobOfSize(0.5 * MB), 'cover.png')}
+      >
+        confirm small
+      </button>
+    </div>
+  ),
+}));

package/src/widgets/ImageField.tsx

@@ -4,8 +4,10 @@ import { useUpload } from '@object-ui/providers';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { X, Image as ImageIcon, Crop as CropIcon, Loader2 } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { ImageLightbox } from './ImageLightbox';
 import { useUploadingSignal } from './useUploadingSignal';
+import { maxSizeError, type TranslateFn } from './file-size-guard';
 import {
   fileValueForSubmit,
   readFileValues,
@@ -24,11 +26,17 @@ const ImageCropperDialog = lazy(() =>
  * ImageField - Image upload widget with preview thumbnails
  * Supports single and multiple image uploads with drag-and-drop and preview display
  */
-export function ImageField({ value, onChange, field, readonly, onUploadingChange, ...props }: FieldWidgetComponentProps<any>) {
+export function ImageField({ value, onChange, field, readonly, onUploadingChange, error, ...props }: FieldWidgetComponentProps<any>) {
   const inputRef = useRef<HTMLInputElement>(null);
-  const imageField = (field || (props as any).schema) as any;
+  const imageField = field as any;
   const multiple = imageField?.multiple || false;
   const accept = imageField?.accept ? imageField.accept.join(',') : 'image/*';
+  /**
+   * Max upload size in bytes. Delivered by `paramToField` for an action param
+   * and by the field config for a record field; enforced before any upload
+   * starts, exactly as FileField does (objectui#4141).
+   */
+  const maxSize = imageField?.maxSize as number | undefined;
   /**
    * Set `field.crop = false` to opt out of inline cropping. Defaults to enabled.
    */
@@ -38,6 +46,8 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
   const { upload } = useUpload();
   const { t } = useObjectTranslation();
   const [uploading, setUploading] = useState(false);
+  /** Client-side rejections (oversize picks), cleared on the next attempt. */
+  const [errors, setErrors] = useState<string[]>([]);
   // Display details of just-uploaded images, keyed by their new `sys_file` id.
   // Submitting the reference form means the field value no longer carries the
   // URL a thumbnail needs; these keep the preview visible until the next read
@@ -58,6 +68,18 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
   const handleCropConfirm = useCallback(
     async (blob: Blob, name: string) => {
       if (!cropTarget) return;
+      // The size that matters here is the CROP's, not the source image's: the
+      // cropper re-encodes to PNG, so cropping an in-limit JPEG can produce a
+      // blob over the limit. Checked before `setUploading` so a rejected crop
+      // never flashes the spinner, and the dialog closes so the message lands
+      // in the field's error row rather than behind the open dialog.
+      const rejection = maxSizeError(t as TranslateFn, { name, size: blob.size }, maxSize);
+      if (rejection) {
+        setErrors([rejection]);
+        setCropTarget(null);
+        return;
+      }
+      setErrors([]);
       setUploading(true);
       try {
         const result = await upload(blob);
@@ -75,7 +97,7 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
         setCropTarget(null);
       }
     },
-    [cropTarget, images, multiple, onChange, upload, remember],
+    [cropTarget, images, multiple, onChange, upload, remember, maxSize, t],
   );
 
   const openCropper = useCallback(
@@ -127,12 +149,32 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
 
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFiles = Array.from(e.target.files || []);
+    // Reset the input up front rather than in `finally`: a pick rejected below
+    // returns before the upload runs, and leaving the old value in place would
+    // stop the user re-picking the same name after shrinking the image.
+    // `selectedFiles` already holds the File objects, so clearing is safe.
+    if (inputRef.current) inputRef.current.value = '';
     if (selectedFiles.length === 0) return;
 
+    // Enforce the declared limit before anything touches the network. Partial
+    // acceptance matches FileField: the in-limit picks of a multi-select still
+    // upload, and only the oversize ones are reported.
+    const rejections: string[] = [];
+    const validFiles = selectedFiles.filter((file) => {
+      const rejection = maxSizeError(t as TranslateFn, file, maxSize);
+      if (rejection) {
+        rejections.push(rejection);
+        return false;
+      }
+      return true;
+    });
+    setErrors(rejections);
+    if (validFiles.length === 0) return;
+
     setUploading(true);
     try {
       const imageObjects = await Promise.all(
-        selectedFiles.map(async (file) => {
+        validFiles.map(async (file) => {
           const result = await upload(file);
           remember(result, file.name);
           return fileValueForSubmit(result, file.name);
@@ -146,8 +188,6 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
       }
     } finally {
       setUploading(false);
-      // Reset input so picking the same file again still triggers change.
-      if (inputRef.current) inputRef.current.value = '';
     }
   };
 
@@ -212,12 +252,18 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
         )}
         
         <Button
+          // DOM pass-through onto the widget's real focusable control — the
+          // upload button is the keyboard path to the hidden file input
+          // (objectui#3318).
+          {...toDomProps(props)}
           type="button"
           variant="outline"
           onClick={() => inputRef.current?.click()}
           className="w-full"
           disabled={uploading}
           data-testid="image-field-upload-button"
+          // AFTER the spread so this widget's own computation wins (#3222).
+          aria-invalid={!!error}
         >
           {uploading ? (
             <Loader2 className="size-4 mr-2 animate-spin" />
@@ -230,6 +276,17 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
               ? t('fields.image.addMore')
               : t('fields.image.upload')}
         </Button>
+
+        {/* Client-side rejections (oversize picks). Same presentation as
+            FileField's error row — this widget previously had no surface for
+            them at all, because it never rejected anything (objectui#4141). */}
+        {errors.length > 0 && (
+          <div className="space-y-0.5">
+            {errors.map((err, i) => (
+              <p key={i} className="text-xs text-destructive">{err}</p>
+            ))}
+          </div>
+        )}
       </div>
 
       {cropEnabled && cropTarget && (

package/src/widgets/LocationField.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * LocationField - Geographic coordinate input for latitude and longitude
  * Stores location as { latitude, longitude } object and displays as comma-separated pair
  */
-export function LocationField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<any>) {
-  const config = field || (props as any).schema;
+export function LocationField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<any>) {
+  const config = field;
   // Location is stored as { latitude, longitude } object
   // For display, convert to "latitude, longitude" string format
   const displayValue = value && typeof value === 'object' 
@@ -39,12 +40,18 @@ export function LocationField({ value, onChange, field, readonly, ...props }: Fi
 
   return (
     <Input
+      // DOM pass-through onto the real focusable control (objectui#3318).
+      {...toDomProps(props)}
       type="text"
       value={displayValue}
       onChange={handleChange}
       placeholder={config?.placeholder || 'latitude, longitude'}
       disabled={readonly || props.disabled}
       className={props.className}
+      // AFTER the spread so this widget's own computation wins: `error` is
+      // the published validation slot (#3222), `!!undefined` → explicit
+      // "false".
+      aria-invalid={!!error}
     />
   );
 }

package/src/widgets/LookupField.gateHintLabel.test.tsx

@@ -0,0 +1,135 @@
+/**
+ * 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.
+ */
+
+/**
+ * A gated lookup names its controlling field by LABEL — objectstack#5407.
+ *
+ * The gate sentence (`lookup.selectFirst`) is translated in all ten packs, but
+ * its `{{fields}}` interpolation came straight off `depends_on`, which holds
+ * API names. So the rendered hint was localized around a raw identifier in
+ * every locale, English included:
+ *
+ *     en    Select crm_account first
+ *     zh-CN 请先选择crm_account
+ *
+ * The `en` row is why this is not merely an i18n bug: an English user was shown
+ * an internal identifier. The form renderer knows the label (it already
+ * resolves the same map for the fixed-option widgets' `emptyHint`) and now
+ * hands it over as `dependsOnLabels`.
+ *
+ * All three gated surfaces are asserted — the trigger's visible text, the
+ * trigger's `title`, and the "browse all" button's `title` — because they were
+ * three independent copies of the same expression and a fix applied to one of
+ * them looks identical from the outside.
+ */
+
+import { render, screen, cleanup } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { LookupField } from './LookupField';
+
+/** Mirrors the reported metadata: the parent field's API name IS an object-ish
+ *  name (`crm_account`), which is exactly what made the leak so legible. */
+const gatedField = {
+  name: 'contact',
+  label: 'Contact',
+  reference_to: 'crm_contact',
+  reference_field: 'name',
+  depends_on: ['crm_account'],
+} as any;
+
+const dataSource = { find: vi.fn(async () => ({ data: [], total: 0 })) } as any;
+
+function renderGated(extra: Record<string, unknown>) {
+  return render(
+    <LookupField
+      field={gatedField}
+      value={undefined}
+      onChange={vi.fn()}
+      readonly={false}
+      dataSource={dataSource}
+      {...({ dependentValues: { crm_account: null }, ...extra } as any)}
+    />,
+  );
+}
+
+beforeEach(() => {
+  Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1280 });
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    dispatchEvent: () => false,
+  })) as any;
+});
+
+afterEach(() => cleanup());
+
+describe('LookupField gate hint names the controlling field (objectstack#5407)', () => {
+  it('interpolates the label the host supplied, not the API name', () => {
+    renderGated({ dependsOnLabels: { crm_account: 'Account' } });
+
+    const trigger = screen.getByTestId('lookup-trigger-gated');
+    expect(trigger).toHaveTextContent('Select Account first');
+    // The identifier must be gone from the copy entirely, not merely
+    // accompanied by the label.
+    expect(trigger).not.toHaveTextContent('crm_account');
+    expect(trigger).toHaveAttribute('title', 'Select Account first');
+  });
+
+  it('labels the gated "browse all" button the same way', () => {
+    renderGated({ dependsOnLabels: { crm_account: 'Account' } });
+
+    const browse = screen.getByTestId('browse-all-records');
+    expect(browse).toBeDisabled();
+    expect(browse).toHaveAttribute('title', 'Select Account first');
+  });
+
+  it('joins several controlling fields by their labels', () => {
+    render(
+      <LookupField
+        field={{ ...gatedField, depends_on: ['crm_account', 'lead_source'] }}
+        value={undefined}
+        onChange={vi.fn()}
+        readonly={false}
+        dataSource={dataSource}
+        {...({
+          dependentValues: { crm_account: null, lead_source: null },
+          dependsOnLabels: { crm_account: 'Account', lead_source: 'Lead Source' },
+        } as any)}
+      />,
+    );
+
+    expect(screen.getByTestId('lookup-trigger-gated')).toHaveTextContent(
+      'Select Account, Lead Source first',
+    );
+  });
+
+  it('falls back to the API name for a field the host did not map', () => {
+    // Standalone use (no host form) has to keep rendering what it rendered
+    // before — the map is an enrichment, not a new requirement. This is also
+    // the assertion that would go red if `dependsOnLabels` were consulted for
+    // its VALUES rather than keyed by field name.
+    renderGated({ dependsOnLabels: { some_other_field: 'Irrelevant' } });
+
+    expect(screen.getByTestId('lookup-trigger-gated')).toHaveTextContent(
+      'Select crm_account first',
+    );
+  });
+
+  it('falls back to the API name when the host passes no map at all', () => {
+    renderGated({});
+
+    expect(screen.getByTestId('lookup-trigger-gated')).toHaveTextContent(
+      'Select crm_account first',
+    );
+  });
+});

package/src/widgets/LookupField.hydration.test.tsx

@@ -71,7 +71,7 @@ describe('LookupField — multi-value hydration batches and shows loading (#3108
 
     // In-flight: loading indicator + raw committed count, no "Select…".
     await waitFor(() => expect(screen.getByTestId('lookup-hydrating')).toBeTruthy());
-    expect(screen.queryByText('Select...')).toBeNull();
+    expect(screen.queryByText('Select…')).toBeNull();
     expect(screen.getByText(/3/)).toBeTruthy();
 
     resolveFind({ data: USERS });

package/src/widgets/LookupField.tsx

@@ -11,6 +11,7 @@ import { cn,
   PopoverContent, EmptyValue } from '@object-ui/components';
 import { Search, X, Loader2, AlertCircle, Plus, TableProperties } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import type { DataSource, QueryParams, LookupColumnDef } from '@object-ui/types';
 import { RecordPickerDialog, lookupFiltersToRecord } from './RecordPickerDialog';
 import type { RecordPickerFilterColumn } from './RecordPickerDialog';
@@ -191,7 +192,7 @@ function mapFieldTypeToFilterType(
  * from the referenced object using `DataSource.find()`.
  * Falls back to static `options` when no DataSource is available.
  */
-export function LookupField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<any>) {
+export function LookupField({ value, onChange, field, readonly, error: fieldError, ...props }: FieldWidgetComponentProps<any>) {
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useFieldTranslation();
   const listboxId = React.useId();
@@ -215,11 +216,15 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
   const [activeIndex, setActiveIndex] = useState(-1);
   const listRef = useRef<HTMLDivElement>(null);
 
-  const lookupField = (field || (props as any).schema) as any;
+  const lookupField = field as any;
 
-  // When rendered via createFieldRenderer wrapper the actual objectSchema field
-  // metadata (reference_to, display_field, etc.) lives at lookupField.field.
-  // Unwrap it so lookup-specific properties resolve correctly.
+  // The form renderer passes `field: field.field || field` — `.field` is the
+  // declared metadata slot (objectui#3090) — so the actual objectSchema field
+  // metadata (reference_to, display_field, etc.) can arrive nested at
+  // `lookupField.field`. Unwrap it so lookup-specific properties resolve
+  // correctly. (This used to credit the docs-demo `createFieldRenderer` wrapper,
+  // which never produced the nesting and was removed in objectui#3910; the form
+  // path is the real producer.)
   // ObjectStack convention uses `reference` while the types use `reference_to`,
   // so we check for both property names.
   const innerField = lookupField?.field;
@@ -279,6 +284,23 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
     return [];
   }, [fieldMeta?.depends_on, fieldMeta?.dependsOn]);
 
+  /**
+   * The gate sentence's `{{fields}}` — the controlling fields named the way the
+   * user sees them on the form, not the way the metadata spells them.
+   *
+   * `depends_on` holds API names, and this used to interpolate them straight
+   * into the sentence, so every locale — `en` included — read "Select
+   * crm_account first" (objectstack#5407): an internal identifier in the UI,
+   * not merely an untranslated word. The host form supplies the name→label map
+   * (`dependsOnLabels`); a name it doesn't cover falls back to itself, so a
+   * standalone widget with no host renders exactly what it did before.
+   */
+  const dependsOnLabelsProp = props.dependsOnLabels;
+  const dependsOnFieldsText = useMemo(
+    () => dependsOn.map((d) => dependsOnLabelsProp?.[d.field] || d.field).join(', '),
+    [dependsOn, dependsOnLabelsProp],
+  );
+
   // Resolve dependent field values from explicit prop or SchemaRendererContext.data
   const dependentValuesProp = props.dependentValues;
 
@@ -912,19 +934,35 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
   // Shared field trigger — the anchor for either the inline PeoplePicker
   // (search fields) or the classic quick-select popover. No onClick: the Radix
   // trigger it is slotted into (PopoverTrigger / SheetTrigger) owns open/close.
+  //
+  // DOM pass-through onto this button — the widget's real focusable control —
+  // per objectui#3318. `name` is withheld: no native control here takes part
+  // in form submission, and a stray `name` on a button invites exactly the
+  // accidental-submitter semantics #3306 kept it off the SelectTrigger for.
+  const { name: _domName, ...triggerDomProps } = toDomProps(props);
   const triggerButton = (
     <Button
+      {...triggerDomProps}
       variant="outline"
       className={cn(
-        'min-w-0 flex-1 justify-start text-left font-normal',
+        // max-w-full: in a BLOCK parent (detail-section inline edit) the
+        // inline-flex button is content-sized — a long selected label pushed
+        // it past the card edge; bounding it lets the inner `truncate` span
+        // clip instead (objectui#3466). flex-1/min-w-0 keep handling the
+        // flex-parent (form row) case.
+        'min-w-0 max-w-full flex-1 justify-start text-left font-normal',
         compact && 'h-8 rounded-none border-0 bg-transparent px-2 shadow-none focus-visible:ring-1 focus-visible:ring-ring/60',
       )}
       type="button"
       disabled={dependenciesMissing || props.disabled}
       data-testid={dependenciesMissing ? 'lookup-trigger-gated' : ((props.name || lookupField?.name) ? `lookup-trigger-${props.name || lookupField.name}` : 'lookup-trigger')}
       title={dependenciesMissing
-        ? t('lookup.selectFirst', { fields: dependsOn.map(d => d.field).join(', ') })
+        ? t('lookup.selectFirst', { fields: dependsOnFieldsText })
         : undefined}
+      // AFTER the spread so this widget's own computation wins (#3222):
+      // `fieldError` is the published validation slot — NOT the popover's
+      // fetch error, which is a widget-internal state named `error` below.
+      aria-invalid={!!fieldError}
     >
       {hydrating ? (
         <Loader2
@@ -936,7 +974,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
       )}
       <span className={cn('truncate', compact && selectedOptions.length === 0 && 'text-muted-foreground')}>
         {dependenciesMissing
-          ? t('lookup.selectFirst', { fields: dependsOn.map(d => d.field).join(', ') })
+          ? t('lookup.selectFirst', { fields: dependsOnFieldsText })
           : hydrating
             // The value EXISTS but its labels are still loading — say so
             // instead of the empty placeholder (#3108).
@@ -1044,7 +1082,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
             <div className="relative">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
               <Input
-                placeholder={t('common.search') + '...'}
+                placeholder={t('table.search')}
                 value={searchQuery}
                 onChange={(e) => handleSearchChange(e.target.value)}
                 onKeyDown={handleSearchKeyDown}
@@ -1218,7 +1256,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
           onClick={() => setIsPickerOpen(true)}
           aria-label={t('lookup.browseAll')}
           title={dependenciesMissing
-            ? t('lookup.selectFirst', { fields: dependsOn.map(d => d.field).join(', ') })
+            ? t('lookup.selectFirst', { fields: dependsOnFieldsText })
             : t('lookup.browseAll')}
           data-testid="browse-all-records"
         >
@@ -1248,6 +1286,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
           lookupFilters={lookupFilters}
           baseFilter={dependentFilter}
           cellRenderer={getCellRendererResolver()}
+          fieldsMeta={refObjectSchema?.fields}
           filterColumns={filterColumns}
         />
       )}

package/src/widgets/MasterDetailField.tsx

@@ -25,7 +25,7 @@ export function MasterDetailField({
   ...props 
 }: FieldWidgetComponentProps<MasterDetailValue[]>) {
   const items = value || [];
-  const config = field || (props as any).schema;
+  const config = field;
 
   const handleAdd = () => {
     // This would typically open a dialog to select/create related records