@object-ui/fields 17.1.0 → 17.3.0

package/src/widgets/OptionsEmptyState.test.tsx

@@ -0,0 +1,169 @@
+/**
+ * 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.
+ */
+
+/**
+ * The empty / dependency-gated state of the fixed-option widgets (objectui#3231).
+ *
+ * Two invariants, pinned for ALL FOUR widgets — they are what regressed:
+ *
+ *  1. **declared ⇒ delivered.** `emptyHint` is declared on
+ *     `FieldWidgetComponentProps` and computed by the form renderer. Every one
+ *     of the four widgets used to destructure it into `_emptyHint` and drop it
+ *     on the floor, so the host's hint could never reach a user once the field
+ *     went through the `field:` registry (i.e. always, in the real console).
+ *  2. **the fallback is translated.** With no host hint the widget renders its
+ *     own copy — which used to be a hardcoded English literal
+ *     (`'No options available'`, `` `Select ${…} first` ``) even though
+ *     `useFieldTranslation()` was already imported in one of the same files.
+ *
+ * All four are covered deliberately: they were four independent copies of the
+ * same block, which is exactly why they drifted together and why one widget's
+ * test would have proven nothing about the other three. They now share
+ * `OptionsEmptyState`; these tests keep that true from the outside, so the
+ * guarantee survives someone re-inlining the block.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { I18nProvider } from '@object-ui/i18n';
+import { SelectField } from './SelectField';
+import { MultiSelectField } from './MultiSelectField';
+import { RadioField } from './RadioField';
+import { CheckboxesField } from './CheckboxesField';
+
+interface WidgetCase {
+  label: string;
+  Widget: React.ComponentType<any>;
+  type: string;
+  testId: string;
+}
+
+const WIDGETS: WidgetCase[] = [
+  { label: 'SelectField', Widget: SelectField, type: 'select', testId: 'select-empty-province' },
+  {
+    label: 'MultiSelectField',
+    Widget: MultiSelectField,
+    type: 'multiselect',
+    testId: 'multiselect-empty-province',
+  },
+  { label: 'RadioField', Widget: RadioField, type: 'radio', testId: 'radio-empty-province' },
+  {
+    label: 'CheckboxesField',
+    Widget: CheckboxesField,
+    type: 'checkboxes',
+    testId: 'checkboxes-empty-province',
+  },
+];
+
+/** Gated: `country` is empty, so no option is offered yet (#2284). */
+const gatedField = (type: string) =>
+  ({
+    name: 'province',
+    type,
+    dependsOn: 'country',
+    options: [
+      { label: 'Zhejiang', value: 'zj', visibleWhen: "record.country == 'cn'" },
+      { label: 'California', value: 'ca', visibleWhen: "record.country == 'us'" },
+    ],
+  }) as any;
+
+/** Not gated, simply nothing to offer — the other way a list ends up empty. */
+const unconfiguredField = (type: string) => ({ name: 'province', type, options: [] }) as any;
+
+function renderWidget(
+  { Widget }: WidgetCase,
+  field: any,
+  extra: Record<string, unknown> = {},
+  language?: string,
+) {
+  const element = (
+    <Widget
+      value={undefined}
+      onChange={vi.fn()}
+      field={field}
+      {...({ name: 'province', dependentValues: {}, ...extra } as any)}
+    />
+  );
+  return render(
+    language ? (
+      <I18nProvider config={{ defaultLanguage: language, detectBrowserLanguage: false }}>
+        {element}
+      </I18nProvider>
+    ) : (
+      element
+    ),
+  );
+}
+
+describe('option widgets — the host-supplied `emptyHint` reaches the user (objectui#3231)', () => {
+  it.each(WIDGETS)(
+    '$label renders the host hint instead of its own gate copy',
+    (widget) => {
+      // What the form renderer actually computes: a sentence built from the
+      // controlling field's human LABEL, which the widget cannot know (its
+      // metadata only carries the name `country`).
+      renderWidget(widget, gatedField(widget.type), {
+        emptyHint: 'Choose the Country field first',
+      });
+
+      const box = screen.getByTestId(widget.testId);
+      expect(box).toHaveTextContent('Choose the Country field first');
+      // …and NOT the widget's own copy, which is what used to render.
+      expect(box.textContent).not.toMatch(/select country first/i);
+    },
+  );
+
+  it.each(WIDGETS)(
+    '$label renders the host hint for an unconfigured (ungated) list too',
+    (widget) => {
+      // `emptyHint` is a declared prop of the widget contract, not a private
+      // channel of one form-renderer branch: supplied ⇒ used, always.
+      renderWidget(widget, unconfiguredField(widget.type), {
+        emptyHint: 'Options come from the price book',
+      });
+
+      expect(screen.getByTestId(widget.testId)).toHaveTextContent(
+        'Options come from the price book',
+      );
+    },
+  );
+
+  it.each(WIDGETS)('$label prefers a host hint over its translated fallback', (widget) => {
+    // Even under a non-English locale the HOST wins — it is the single source.
+    renderWidget(widget, gatedField(widget.type), { emptyHint: 'Pick a Country first' }, 'zh');
+
+    const box = screen.getByTestId(widget.testId);
+    expect(box).toHaveTextContent('Pick a Country first');
+    expect(box.textContent).not.toContain('请先选择');
+  });
+});
+
+describe('option widgets — the fallback copy is translated, never a hardcoded literal', () => {
+  it.each(WIDGETS)('$label translates the gate copy when no host hint is given', (widget) => {
+    renderWidget(widget, gatedField(widget.type), {}, 'zh');
+
+    const box = screen.getByTestId(widget.testId);
+    expect(box).toHaveTextContent('请先选择country');
+    expect(box.textContent).not.toMatch(/select .* first/i);
+  });
+
+  it.each(WIDGETS)('$label translates the empty copy when no host hint is given', (widget) => {
+    renderWidget(widget, unconfiguredField(widget.type), {}, 'zh');
+
+    const box = screen.getByTestId(widget.testId);
+    expect(box).toHaveTextContent('暂无可选项');
+    expect(box.textContent).not.toMatch(/no options available/i);
+  });
+});
+
+// The no-provider fallback lives in `OptionsEmptyState.no-provider.test.tsx`:
+// mounting `I18nProvider` here installs its instance as react-i18next's global
+// default (`initReactI18next`), so after any test above there is no longer a
+// "no provider" state to observe within this module graph.
+

package/src/widgets/OptionsEmptyState.tsx

@@ -0,0 +1,83 @@
+/**
+ * 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 React from 'react';
+import { cn } from '@object-ui/components';
+import { useFieldTranslation } from './useFieldTranslation';
+
+/**
+ * The "this option list cannot be filled" state shared by every fixed-option
+ * widget (`SelectField` single, `MultiSelectField`, `RadioField`,
+ * `CheckboxesField`) — objectui#3231.
+ *
+ * ## One producer, one consumer
+ *
+ * `emptyHint` is a declared prop on `FieldWidgetComponentProps`, computed by
+ * the form renderer (`form.tsx`, the `#2284` dependency gate) and forwarded to
+ * these widgets. **When the host supplies it, it wins**: the host resolves the
+ * controlling fields to their human LABELS ("Select Country first"), where a
+ * widget on its own only knows the raw metadata names ("Select country first").
+ * Absent a host hint — a standalone widget, the inline grid editor, an action
+ * param dialog — the widget falls back to its own copy.
+ *
+ * Each of the four widgets used to inline this box, destructure `emptyHint`
+ * into `_emptyHint` and throw it away, then render a hardcoded English literal.
+ * Four independent copies is precisely why they drifted together, so the box
+ * AND the copy live here only: adding a fifth option widget cannot re-introduce
+ * the gap without deliberately re-implementing it.
+ *
+ * ## Fallback copy is translated
+ *
+ * The fallback goes through `useFieldTranslation()` (`fields.options.*`,
+ * present in all ten locale packs) rather than an English string literal — the
+ * gate sentence is the SAME i18n key the form renderer uses, so the two can
+ * never say different things in the same locale.
+ */
+export interface OptionsEmptyStateProps {
+  /**
+   * Host-computed hint. Wins over the widget's own copy whenever it is a
+   * non-empty string — this is the whole point of the prop.
+   */
+  emptyHint?: string;
+  /** The list is waiting on a `dependsOn` controlling field (vs. unconfigured). */
+  gated: boolean;
+  /** Controlling field names, used by the fallback gate sentence. */
+  dependsOnFields: readonly string[];
+  /** Widget-specific stable locator, e.g. `select-empty-${fieldName}`. */
+  testId?: string;
+  /** Widget-specific sizing (the dropdown is a fixed `h-9`, lists grow). */
+  className?: string;
+}
+
+export function OptionsEmptyState({
+  emptyHint,
+  gated,
+  dependsOnFields,
+  testId,
+  className,
+}: OptionsEmptyStateProps) {
+  const { t } = useFieldTranslation();
+  // The host's hint when it computed one; otherwise this widget's own copy,
+  // translated. Never an English literal — that was the reported defect.
+  const hint =
+    emptyHint ||
+    (gated
+      ? t('fields.options.selectFirst', { fields: dependsOnFields.join(' / ') })
+      : t('fields.options.empty'));
+  return (
+    <div
+      data-testid={testId}
+      className={cn(
+        'flex w-full items-center rounded-md border border-input bg-muted/30 px-3 py-2 text-sm text-muted-foreground',
+        className,
+      )}
+    >
+      {hint}
+    </div>
+  );
+}

package/src/widgets/PasswordField.tsx

@@ -2,22 +2,22 @@ import React, { useState } from 'react';
 import { Input } from '@object-ui/components';
 import { Button } from '@object-ui/components';
 import { Eye, EyeOff } from 'lucide-react';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * PasswordField - Secure password input with visibility toggle
  * Includes show/hide toggle button and masks value in readonly mode
  */
-export function PasswordField({ value, onChange, field, readonly, className, ...props }: FieldWidgetProps<string>) {
+export function PasswordField({ value, onChange, field, readonly, className, ...props }: FieldWidgetComponentProps<string>) {
   const [showPassword, setShowPassword] = useState(false);
-  const config = field || (props as any).schema;
+  const config = field;
 
   if (readonly) {
     return <span className="text-sm">••••••••</span>;
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   return (
     <div className="relative">

package/src/widgets/PeoplePicker.tsx

@@ -316,8 +316,14 @@ export function PeoplePicker({
   // returns the same records (StrictMode double-effect, refetch-on-focus)
   // re-emits a new array; resetting on identity alone yanked the cursor to -1
   // mid-navigation (flaky ArrowDown→Enter, and a real UX nit).
+  //
+  // The id separator is the escaped U+0000 spelling, not the byte itself
+  // (objectstack#5450): one raw NUL made this whole file binary to grep and
+  // ripgrep — a content search printed `binary file matches` and no line. The
+  // runtime value is unchanged, and it is the same separator the `cursorEpoch`
+  // key below already spelled this way.
   const recordsSignature = useMemo(
-    () => query.records.map(r => String(getPersonId(r, idField))).join(''),
+    () => query.records.map(r => String(getPersonId(r, idField))).join('\u0000'),
     [query.records, idField],
   );
   // The reset runs in the RENDER PHASE (the "adjusting state during render"

package/src/widgets/PercentField.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { Input, Slider, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * PercentField - Percentage input with configurable decimal precision
  * Stores values as decimals (0-1) and displays as percentages (0-100%)
  * Includes a slider for interactive control.
  */
-export function PercentField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetProps<number>) {
-  const percentField = (field || (props as any).schema) as any;
+export function PercentField({ value, onChange, field, readonly, error, className, ...props }: FieldWidgetComponentProps<number>) {
+  const percentField = field as any;
   const precision = percentField?.precision ?? 2;
 
   // Convention detection. A field declaring `max > 1` (e.g. `max: 100`) stores
@@ -64,7 +65,7 @@ export function PercentField({ value, onChange, field, readonly, errorMessage, c
     <div className="space-y-2">
       <div className="relative">
         <Input
-          {...props}
+          {...toDomProps(props)}
           type="number"
           value={displayValue}
           onChange={handleChange}
@@ -72,7 +73,7 @@ export function PercentField({ value, onChange, field, readonly, errorMessage, c
           disabled={readonly || props.disabled}
           className={`pr-8 ${className || ''}`}
           step={Math.pow(10, -precision).toFixed(precision)}
-          aria-invalid={!!errorMessage}
+          aria-invalid={!!error}
         />
         <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">
           %

package/src/widgets/PhoneField.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * PhoneField - Telephone number input with tel link in readonly mode
  * Renders as a clickable tel link when readonly, standard phone input otherwise
  */
-export function PhoneField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
-  const config = field || (props as any).schema;
+export function PhoneField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
+  const config = field;
   if (readonly) {
     if (!value) return <EmptyValue />;
     return (
@@ -20,8 +21,7 @@ export function PhoneField({ value, onChange, field, readonly, errorMessage, ...
     );
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   return (
     <Input
@@ -31,7 +31,7 @@ export function PhoneField({ value, onChange, field, readonly, errorMessage, ...
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || '(555) 123-4567'}
       disabled={readonly || domProps.disabled}
-      aria-invalid={!!errorMessage}
+      aria-invalid={!!error}
     />
   );
 }

package/src/widgets/QRCodeField.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { Input, Button, EmptyValue } from '@object-ui/components';
 import { QrCode, Copy } from 'lucide-react';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * QR Code field widget - generates QR codes from text
  * Uses a simple SVG-based QR code generator
  */
-export function QRCodeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+export function QRCodeField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
   const [showQR, setShowQR] = React.useState(false);
-  const config = field || (props as any).schema;
+  const config = field;
 
   // Simple QR code generation using an external library would be ideal
   // For now, we'll use a service API approach or placeholder
@@ -47,12 +48,18 @@ export function QRCodeField({ value, onChange, field, readonly, ...props }: Fiel
     <div className="space-y-3">
       <div className="flex items-center gap-2">
         <Input
+          // DOM pass-through onto the real focusable control (objectui#3318).
+          {...toDomProps(props)}
           type="text"
           value={value || ''}
           onChange={(e) => onChange(e.target.value)}
           placeholder={config?.placeholder || 'Enter text for QR code'}
           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}
         />
         {value && (
           <>

package/src/widgets/RadioField.tsx

@@ -1,7 +1,9 @@
 import React, { useId, useEffect } from 'react';
 import { RadioGroup, RadioGroupItem, Label, EmptyValue } from '@object-ui/components';
 import { isValueStillOffered, type OptionLike } from '@object-ui/core';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
+import { OptionsEmptyState } from './OptionsEmptyState';
 import { useCascadingOptions } from './useCascadingOptions';
 
 type Option = OptionLike;
@@ -24,17 +26,17 @@ export function RadioField({
   field,
   readonly,
   className,
-  schema,
   dependentValues,
   dependsOn: dependsOnProp,
-  emptyHint: _emptyHint,
+  emptyHint,
   dataSource: _dataSource,
+  error,
   ...props
-}: FieldWidgetProps<string>) {
-  const config = (field || schema) as any;
+}: FieldWidgetComponentProps<string>) {
+  const config = field as any;
   const rawOptions: Option[] = config?.options || [];
   const groupId = useId();
-  const fieldName = (props as any).name || config?.name || (props as any).id || '';
+  const fieldName = props.name || config?.name || props.id || '';
 
   const dependsOn = config?.dependsOn ?? dependsOnProp;
   const { options, gated, dependsOnFields } = useCascadingOptions<Option>(
@@ -61,28 +63,36 @@ export function RadioField({
   }
 
   // No offered options is unfillable — surface a legible state instead of an
-  // empty radio group: a dependency-gated list prompts for its controlling
-  // field; an unconfigured / fully-filtered list says so. Mirrors the select.
+  // empty radio group: the host's `emptyHint` when it computed one, else this
+  // widget's own translated copy. Shared with the select / multiselect /
+  // checkboxes so the four cannot drift again (objectui#3231).
   if (options.length === 0) {
-    const hint = gated
-      ? `Select ${dependsOnFields.join(' / ')} first`
-      : 'No options available';
     return (
-      <div
-        data-testid={fieldName ? `radio-empty-${fieldName}` : undefined}
-        className="flex min-h-9 w-full items-center rounded-md border border-input bg-muted/30 px-3 py-2 text-sm text-muted-foreground"
-      >
-        {hint}
-      </div>
+      <OptionsEmptyState
+        emptyHint={emptyHint}
+        gated={gated}
+        dependsOnFields={dependsOnFields}
+        testId={fieldName ? `radio-empty-${fieldName}` : undefined}
+        className="min-h-9"
+      />
     );
   }
 
   return (
+    // DOM pass-through onto the radiogroup (objectui#3318). Unlike Radix
+    // `Select.Root` (#3306) this Root IS a real DOM element — a
+    // `<div role="radiogroup">` — and `radiogroup` is exactly the role
+    // WAI-ARIA designates to carry `aria-invalid` for a set of radios
+    // (`radio` itself does not support it): the group's state is announced
+    // when focus lands on any radio inside it.
     <RadioGroup
+      {...toDomProps(props)}
       value={value ?? ''}
       onValueChange={onChange}
-      disabled={(props as any).disabled}
+      disabled={props.disabled}
       className={className}
+      // AFTER the spread so this widget's own computation wins (#3222).
+      aria-invalid={!!error}
     >
       {options.map((opt) => {
         // Radix speaks strings — stringify the (possibly numeric,

package/src/widgets/RatingField.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { Star } from 'lucide-react';
 import { cn } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * Rating field widget - provides a star rating input
  * Supports numeric values from 0 to max (default 5)
  */
-export function RatingField({ value, onChange, field, readonly, className, ...props }: FieldWidgetProps<number>) {
+export function RatingField({ value, onChange, field, readonly, className, error, ...props }: FieldWidgetComponentProps<number>) {
   // Get rating-specific configuration from field metadata
-  const ratingField = (field || (props as any).schema) as any;
+  const ratingField = field as any;
   const max = ratingField?.max ?? 5;
   const currentValue = value ?? 0;
 
@@ -37,8 +38,21 @@ export function RatingField({ value, onChange, field, readonly, className, ...pr
     );
   }
 
+  // DOM pass-through (objectui#3318): the container carries the form
+  // renderer's id / aria-describedby, but NOT its `aria-invalid` — a plain
+  // wrapper div is not where assistive tech reads the invalid state. That
+  // state goes onto every focusable star button below, computed from the
+  // published `error` slot (#3222). `name` is withheld too: it is only
+  // DOM-legal on form controls, and on this div it is exactly the leak
+  // #3291 sweeps for.
+  const {
+    'aria-invalid': _hostAriaInvalid,
+    name: _domName,
+    ...groupDomProps
+  } = toDomProps(props);
+
   return (
-    <div className={cn("flex items-center gap-1", className)}>
+    <div {...groupDomProps} className={cn("flex items-center gap-1", className)}>
       {Array.from({ length: max }, (_, i) => (
         <button
           key={i}
@@ -48,6 +62,7 @@ export function RatingField({ value, onChange, field, readonly, className, ...pr
           onMouseLeave={() => setHoverValue(null)}
           className="focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded"
           disabled={readonly || props.disabled}
+          aria-invalid={!!error}
         >
           <Star
             className={`w-5 h-5 transition-colors ${

package/src/widgets/RecipientPickerField.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Combobox, EmptyValue, cn } from '@object-ui/components';
 import { SchemaRendererContext } from '@object-ui/react';
-import type { FieldWidgetProps } from './types';
+import type { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { useFieldTranslation } from './useFieldTranslation';
 
 /**
@@ -53,12 +54,13 @@ export function RecipientPickerField({
   onChange,
   readonly,
   className,
+  error,
   ...props
-}: FieldWidgetProps<string>) {
+}: FieldWidgetComponentProps<string>) {
   const ctx = React.useContext(SchemaRendererContext);
   const { t } = useFieldTranslation();
-  const dataSource: any = (props as any).dataSource ?? (ctx as any)?.dataSource ?? null;
-  const disabled = (props as any).disabled as boolean | undefined;
+  const dataSource: any = props.dataSource ?? (ctx as any)?.dataSource ?? null;
+  const disabled = props.disabled;
   const dependentValues: Record<string, any> = (props as any).dependentValues ?? {};
   const recipientType = String(dependentValues.recipient_type ?? '');
   const mapping = TYPE_TO_OBJECT[recipientType];
@@ -133,6 +135,8 @@ export function RecipientPickerField({
     // field is never un-editable.
     return (
       <input
+        // DOM pass-through onto the real focusable control (objectui#3318).
+        {...toDomProps(props)}
         className={cn(
           'w-full rounded border bg-background px-2 py-1 text-sm',
           className,
@@ -140,6 +144,7 @@ export function RecipientPickerField({
         value={value ?? ''}
         disabled={disabled || readonly}
         onChange={(e) => onChange(e.target.value as any)}
+        aria-invalid={!!error}
       />
     );
   }
@@ -149,8 +154,19 @@ export function RecipientPickerField({
     return <span className={className}>{options.find((o) => o.value === value)?.label ?? value}</span>;
   }
 
+  // DOM pass-through onto the combobox trigger — the widget's real focusable
+  // control (objectui#3318). `name` is withheld: the trigger is a button, not
+  // a submission control (same reasoning as #3306's SelectTrigger).
+  //
+  // NOTE this widget stays on the #3318 ledger regardless: its dependency-
+  // gated state (no `recipient_type` chosen yet — the state a fresh form and
+  // the registry sweep render) is a plain hint paragraph with no focusable
+  // control, so there is nothing there to carry the attribute.
+  const { name: _domName, ...triggerDomProps } = toDomProps(props);
+
   return (
     <Combobox
+      {...triggerDomProps}
       options={options}
       value={value ?? ''}
       onValueChange={(v) => onChange(v as any)}
@@ -163,6 +179,8 @@ export function RecipientPickerField({
       emptyText={records === null ? t('fields.recipient.loading') : t('fields.recipient.empty')}
       disabled={disabled}
       className={cn('w-full', className)}
+      // AFTER the spread so this widget's own computation wins (#3222).
+      aria-invalid={!!error}
     />
   );
 }