@object-ui/fields 17.3.0 → 17.5.0

package/src/__tests__/widget-dom-leak-e2e.test.tsx

@@ -50,17 +50,26 @@
  * 4. **This repo runs happy-dom, not jsdom** (`vitest.config.mts`), whose IDL
  *    coverage has real gaps — `select[size]`, `option[label]`, `textarea[wrap]`
  *    and `col[span]` are all standard HTML that happy-dom does not reflect.
- *    See {@link isKnownAttribute} for how the judge is built, and
- *    {@link HAPPY_DOM_IDL_GAPS} for each measured exception and its reason.
- *    Every one of those four was found BY the calibration fixture below, not
+ *    See `@object-ui/test-support`'s `dom-leak-judge` for how the judge is
+ *    built, and its `HAPPY_DOM_IDL_GAPS` for each measured exception and its
+ *    reason. Every one of those four was found BY a calibration fixture, not
  *    by guesswork.
  *
- * ## The judge proves itself
+ * ## The judge proves itself — next to the judge, not here
  *
- * Two fixtures run before the sweep: standard markup that must yield ZERO
- * findings, and markup with planted fake attributes that must ALL be found.
- * When a happy-dom upgrade changes IDL coverage, those fail loudly instead of
- * the sweep going quietly blind.
+ * `isKnownAttribute` / `findLeaks` / `leakReport` are imported from
+ * `@object-ui/test-support`, which is where they now live for BOTH DOM-leak
+ * gates (objectui#4434). They used to be defined in this file and copied into
+ * `packages/app-shell/src/__tests__/widget-dom-leak-sweep.test.tsx`, and the
+ * two copies had already drifted.
+ *
+ * The calibration fixtures moved with them: standard markup that must yield
+ * ZERO findings, and markup with planted fake attributes that must ALL be
+ * found, now unioned from both gates' fixtures and run once in
+ * `packages/test-support/src/__tests__/dom-leak-judge.test.tsx`. When a
+ * happy-dom upgrade changes IDL coverage, that fails loudly instead of this
+ * sweep going quietly blind — and it now fails in ONE place instead of needing
+ * to be discovered twice.
  *
  * ## Deliberate coverage boundary
  *
@@ -84,6 +93,11 @@ import { ComponentRegistry } from '@object-ui/core';
 // Module scope: pulls in the form renderer's registration side effect.
 import '@object-ui/components';
 import { SchemaRenderer } from '@object-ui/react';
+// The attribute judge, shared with `packages/app-shell`'s sweep gate
+// (objectui#4434). It used to be defined in this file and copied into that one;
+// its calibration fixtures now live next to it and prove it for both gates.
+// `@object-ui/test-support` is private and never published — see its README.
+import { findLeaks, leakReport } from '@object-ui/test-support';
 
 import { withFieldCarrier } from '../withFieldCarrier';
 import { FORM_FIELD_TYPES } from '../index';
@@ -131,263 +145,6 @@ import { ObjectRefField } from '../widgets/ObjectRefField';
 import { FilterConditionField } from '../widgets/FilterConditionField';
 import { RecipientPickerField } from '../widgets/RecipientPickerField';
 
-/* ════════════════════════════════════════════════════════════════════════════
- * The judge: is this attribute one HTML actually defines?
- * ══════════════════════════════════════════════════════════════════════════ */
-
-/** Open families. `data-*` is the one open family the widget contract declares. */
-const OPEN_PREFIXES = [
-  'data-',
-  'aria-',
-  // `cmdk-root` / `cmdk-input` / `cmdk-list` … are marks the cmdk library puts
-  // on ITS OWN DOM. Not prop pass-through, and present on every cmdk-based
-  // picker (`object-ref`, `lookup`, …) the moment it renders.
-  'cmdk-',
-];
-
-/**
- * Global HTML attributes. Most are also IDL properties and would be caught by
- * the reflection check below; they are listed because a missing IDL for a
- * genuinely global attribute would otherwise read as a leak.
- */
-const GLOBAL_HTML_ATTRIBUTES = new Set([
-  'id', 'class', 'style', 'title', 'lang', 'dir', 'hidden', 'tabindex', 'role',
-  'slot', 'part', 'exportparts', 'itemid', 'itemprop', 'itemref', 'itemscope',
-  'itemtype', 'translate', 'draggable', 'spellcheck', 'autocapitalize',
-  'autocorrect', 'contenteditable', 'enterkeyhint', 'inputmode', 'accesskey',
-  'nonce', 'is', 'popover', 'inert', 'autofocus',
-]);
-
-/**
- * Attributes whose IDL property is spelled differently enough that the
- * case-insensitive reflection match below cannot find them.
- */
-const ATTRIBUTE_TO_IDL_ALIAS: Record<string, string> = {
-  'class': 'className',
-  'for': 'htmlFor',
-  'accept-charset': 'acceptCharset',
-  'http-equiv': 'httpEquiv',
-};
-
-/**
- * MEASURED gaps in happy-dom's IDL, kept deliberately tiny — each entry is an
- * attribute HTML defines that happy-dom's element does not reflect as a
- * property, so reflection alone would report it as a leak.
- */
-const HAPPY_DOM_IDL_GAPS: Record<string, Set<string>> = {
-  // `HTMLSelectElement.size` is standard; happy-dom does not define it.
-  select: new Set(['size']),
-  // `HTMLOptionElement.label` is standard; happy-dom does not define it.
-  option: new Set(['label']),
-  // `HTMLTextAreaElement.wrap` is standard; happy-dom does not define it.
-  textarea: new Set(['wrap']),
-  // `HTMLTableColElement.span` is standard; happy-dom does not define it.
-  col: new Set(['span']),
-  colgroup: new Set(['span']),
-};
-
-/**
- * SVG needs its own list: the reflection trick does NOT hold for SVG under
- * happy-dom (`SVGElement` reflects almost nothing), and lucide icons put a
- * fixed set of presentation attributes on every icon they render.
- */
-const SVG_ATTRIBUTES = new Set([
-  'xmlns', 'xmlns:xlink', 'version', 'viewbox', 'preserveaspectratio',
-  'width', 'height', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'r', 'rx',
-  'ry', 'd', 'points', 'transform', 'fill', 'fill-rule', 'fill-opacity',
-  'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin',
-  'stroke-dasharray', 'stroke-dashoffset', 'stroke-opacity', 'opacity',
-  'clip-path', 'clip-rule', 'mask', 'offset', 'stop-color', 'stop-opacity',
-  'gradientunits', 'gradienttransform', 'patternunits', 'text-anchor',
-  'dominant-baseline', 'font-size', 'font-family', 'font-weight', 'vector-effect',
-  'shape-rendering', 'focusable', 'overflow', 'color',
-]);
-
-/** Lowercased IDL property names on a tag's prototype chain, cached per tag. */
-const idlCache = new Map<string, Set<string>>();
-
-function idlPropertiesFor(tagName: string): Set<string> {
-  const tag = tagName.toLowerCase();
-  const cached = idlCache.get(tag);
-  if (cached) return cached;
-
-  const names = new Set<string>();
-  const element = document.createElement(tag);
-  for (const own of Object.getOwnPropertyNames(element)) names.add(own.toLowerCase());
-  for (
-    let proto = Object.getPrototypeOf(element);
-    proto && proto !== Object.prototype;
-    proto = Object.getPrototypeOf(proto)
-  ) {
-    for (const name of Object.getOwnPropertyNames(proto)) names.add(name.toLowerCase());
-  }
-  idlCache.set(tag, names);
-  return names;
-}
-
-/**
- * The rule: an attribute is legitimate when HTML/SVG defines it for that
- * element, or when it belongs to an open family.
- *
- * The reflection check ("does the element's prototype chain carry a property
- * with this name, case-insensitively?") is what makes this maintainable — it
- * covers `readonly→readOnly`, `maxlength→maxLength`, `colspan→colSpan` and
- * every other per-tag attribute automatically, instead of a hand-kept table
- * per element type that would rot.
- */
-function isKnownAttribute(element: Element, attribute: string): boolean {
-  const name = attribute.toLowerCase();
-
-  if (OPEN_PREFIXES.some((prefix) => name.startsWith(prefix))) return true;
-
-  // Inline event handlers (`onclick`) reflect as IDL properties on every
-  // element; React never emits them as attributes, so reaching one means a
-  // handler-shaped prop was stringified onto the DOM. Treat as a leak.
-  if (name.startsWith('on')) return false;
-
-  const tag = element.tagName.toLowerCase();
-
-  if (element.namespaceURI === 'http://www.w3.org/2000/svg') {
-    return SVG_ATTRIBUTES.has(name) || GLOBAL_HTML_ATTRIBUTES.has(name);
-  }
-
-  if (GLOBAL_HTML_ATTRIBUTES.has(name)) return true;
-  if (HAPPY_DOM_IDL_GAPS[tag]?.has(name)) return true;
-
-  const idl = idlPropertiesFor(tag);
-  const alias = ATTRIBUTE_TO_IDL_ALIAS[name];
-  if (alias && idl.has(alias.toLowerCase())) return true;
-  return idl.has(name);
-}
-
-interface Leak {
-  tag: string;
-  attribute: string;
-  value: string;
-  outerHTML: string;
-}
-
-/** Every unexplained attribute on `root` and its descendants. */
-function findLeaks(root: Element): Leak[] {
-  const leaks: Leak[] = [];
-  const elements: Element[] = [root, ...Array.from(root.querySelectorAll('*'))];
-  for (const element of elements) {
-    for (const attribute of Array.from(element.attributes)) {
-      if (isKnownAttribute(element, attribute.name)) continue;
-      leaks.push({
-        tag: element.tagName.toLowerCase(),
-        attribute: attribute.name,
-        value: attribute.value,
-        outerHTML: element.outerHTML.slice(0, 400),
-      });
-    }
-  }
-  return leaks;
-}
-
-/**
- * Renders the finding as the assertion's "actual" value, so a failure names
- * the widget, the element, the attribute, its value and the markup. A 46-widget
- * sweep failing as `expected [] to equal [ …47 items ]` is unusable.
- */
-function leakReport(widgetType: string, variant: string, leaks: Leak[]): string {
-  if (leaks.length === 0) return '';
-  const lines = leaks.map(
-    (leak) =>
-      `  <${leak.tag}> leaked ${leak.attribute}="${leak.value}"\n` +
-      `      in: ${leak.outerHTML}`,
-  );
-  return (
-    `field:${widgetType} [${variant}] leaked ${leaks.length} non-DOM ` +
-    `attribute(s):\n${lines.join('\n')}`
-  );
-}
-
-/* ════════════════════════════════════════════════════════════════════════════
- * The judge proves itself, BEFORE it is trusted on 46 widgets
- * ══════════════════════════════════════════════════════════════════════════ */
-
-/**
- * Ordinary, correct markup. Every attribute here is one HTML defines, several
- * chosen precisely because their IDL name differs from the attribute
- * (`readonly`/`maxlength`/`colspan`/`class`/`for`), plus the two happy-dom IDL
- * gaps (`select[size]`, `option[label]`) and a cmdk mark.
- */
-const CLEAN_FIXTURE = `
-  <div id="root" class="a b" title="t" role="group" tabindex="0" hidden
-       data-testid="x" aria-label="l" data-state="open">
-    <input type="text" name="n" value="v" placeholder="p" readonly maxlength="5"
-           minlength="1" required autofocus autocomplete="off" inputmode="text"
-           step="1" min="0" max="9" pattern=".*" list="dl" />
-    <textarea rows="3" cols="4" wrap="soft" readonly></textarea>
-    <select size="2" multiple><option label="L" value="v" selected></option></select>
-    <button type="button" disabled formnovalidate value="on">b</button>
-    <a href="#" target="_blank" rel="noopener" download hreflang="en"></a>
-    <label for="root">l</label>
-    <img src="s.png" alt="a" width="10" height="10" loading="lazy" decoding="async" />
-    <table><colgroup><col span="2" /></colgroup><tbody><tr>
-      <td colspan="2" rowspan="1" headers="h"></td></tr></tbody></table>
-    <div cmdk-root=""><div cmdk-list=""></div></div>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
-         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-         stroke-linejoin="round" class="icon"><path d="M0 0h24v24H0z" /></svg>
-  </div>
-`;
-
-/** Every planted attribute here MUST be reported. */
-const PLANTED_LEAKS: ReadonlyArray<readonly [string, string]> = [
-  // The renderer-only props that reached the DOM in the audit.
-  ['schema', '[object Object]'],
-  ['error', 'Title is required'],
-  ['emptyhint', 'Select country first'],
-  ['datasource', '[object Object]'],
-  ['dependentvalues', '[object Object]'],
-  ['dependson', 'country'],
-  ['inputtype', 'text'],
-  ['compact', 'true'],
-  ['onselectrecord', 'function'],
-  // The SDUI-only extra.
-  ['label', 'Title'],
-  // The open tail: arbitrary keys an author wrote on the field config.
-  ['zzcanary', 'CANARY-STR'],
-  ['zzcanaryobj', '[object Object]'],
-  ['zzcanarynum', '42'],
-  ['zzcanarycamel', 'CANARY-CAMEL'],
-  ['reference_to', 'contacts'],
-];
-
-describe('the leak judge is calibrated (objectui#3291)', () => {
-  it('reports NOTHING on standard markup — no false positives', () => {
-    const host = document.createElement('div');
-    host.innerHTML = CLEAN_FIXTURE;
-    document.body.appendChild(host);
-    try {
-      const leaks = findLeaks(host);
-      expect(
-        leaks.map((l) => `<${l.tag}> ${l.attribute}="${l.value}"`).join('\n'),
-      ).toBe('');
-    } finally {
-      host.remove();
-    }
-  });
-
-  it('reports EVERY planted fake attribute — no false negatives', () => {
-    const host = document.createElement('div');
-    const planted = PLANTED_LEAKS.map(([name, value]) => `${name}="${value}"`).join(' ');
-    // On an <input>, so nothing can be excused by a permissive container.
-    host.innerHTML = `<input type="text" name="n" ${planted} />`;
-    document.body.appendChild(host);
-    try {
-      const found = new Set(findLeaks(host).map((leak) => leak.attribute));
-      const missed = PLANTED_LEAKS.map(([name]) => name).filter((name) => !found.has(name));
-      expect(missed).toEqual([]);
-      expect(found.size).toBe(PLANTED_LEAKS.length);
-    } finally {
-      host.remove();
-    }
-  });
-});
-
 /* ════════════════════════════════════════════════════════════════════════════
  * Every registered field widget, both hosts
  * ══════════════════════════════════════════════════════════════════════════ */
@@ -546,7 +303,7 @@ describe('no field widget leaks non-DOM props to the DOM (objectui#3291)', () =>
   it.each(types)('field:%s — form path, plain field', async (type) => {
     renderForm(fieldConfig(type), false);
     const row = await formRow();
-    expect(leakReport(type, 'form/plain', findLeaks(row))).toBe('');
+    expect(leakReport(`field:${type} [form/plain]`, findLeaks(row))).toBe('');
   });
 
   it.each(types)('field:%s — form path, author-written extra keys', async (type) => {
@@ -555,7 +312,7 @@ describe('no field widget leaks non-DOM props to the DOM (objectui#3291)', () =>
     // put on the field config arrives at the widget as a prop.
     renderForm(fieldConfig(type, AUTHORED_EXTRAS), false);
     const row = await formRow();
-    expect(leakReport(type, 'form/authored-extras', findLeaks(row))).toBe('');
+    expect(leakReport(`field:${type} [form/authored-extras]`, findLeaks(row))).toBe('');
   });
 
   it.each(types)('field:%s — form path, after a real validation failure', async (type) => {
@@ -572,7 +329,9 @@ describe('no field widget leaks non-DOM props to the DOM (objectui#3291)', () =>
       );
     });
 
-    expect(leakReport(type, 'form/validation-error', findLeaks(await formRow()))).toBe('');
+    expect(
+      leakReport(`field:${type} [form/validation-error]`, findLeaks(await formRow())),
+    ).toBe('');
   });
 
   it.each(types)('field:%s — SDUI path, plain node', async (type) => {
@@ -583,7 +342,7 @@ describe('no field widget leaks non-DOM props to the DOM (objectui#3291)', () =>
       <SchemaRenderer schema={{ ...fieldConfig(type), type: `field:${type}` } as any} />,
     );
     await waitFor(() => expect(container.firstElementChild).toBeTruthy());
-    expect(leakReport(type, 'sdui/plain', findLeaks(container))).toBe('');
+    expect(leakReport(`field:${type} [sdui/plain]`, findLeaks(container))).toBe('');
   });
 
   it.each(types)('field:%s — SDUI path, author-written extra keys', async (type) => {
@@ -593,6 +352,6 @@ describe('no field widget leaks non-DOM props to the DOM (objectui#3291)', () =>
       />,
     );
     await waitFor(() => expect(container.firstElementChild).toBeTruthy());
-    expect(leakReport(type, 'sdui/authored-extras', findLeaks(container))).toBe('');
+    expect(leakReport(`field:${type} [sdui/authored-extras]`, findLeaks(container))).toBe('');
   });
 });

package/src/complex-widgets.test.tsx

@@ -191,9 +191,18 @@ describe('Complex & Relationship Widgets', () => {
                 expect(mockDataSource.find).toHaveBeenCalledTimes(1);
             });
 
-            // Type in search
+            // Type in search. U+2026 now, and it comes from a PACK VALUE:
+            // objectui#4375 retired the `common.search` + '...' concatenation
+            // this used to pin, so the placeholder is `table.search`
+            // — read through `useFieldTranslation`, whose no-provider defaults map
+            // serves the `en` byte `Search…` in this test. It therefore moves with
+            // the pack from here on, and is covered by objectui#3878's glyph pin.
+            // `common.search` itself is retired from the ten packs and from this
+            // package's defaults map (objectui#4392); naming it bare rather than
+            // spelling a t() call around it is what keeps that retirement's
+            // revival pin readable — see common-search-retired-4392.test.ts.
             await act(async () => {
-                fireEvent.change(screen.getByPlaceholderText('Search...'), {
+                fireEvent.change(screen.getByPlaceholderText('Search…'), {
                     target: { value: 'acme' },
                 });
             });
@@ -462,7 +471,9 @@ describe('Complex & Relationship Widgets', () => {
                 expect(screen.getByText('Alpha')).toBeInTheDocument();
             });
 
-            const searchInput = screen.getByPlaceholderText('Search...');
+            // U+2026 from the `table.search` pack value — see the note on the
+            // `$search` test above (objectui#4375).
+            const searchInput = screen.getByPlaceholderText('Search…');
 
             // Arrow down twice: -1 → 0 (Alpha) → 1 (Beta)
             await act(async () => {
@@ -480,9 +491,14 @@ describe('Complex & Relationship Widgets', () => {
             expect(onChange).toHaveBeenCalledWith('2');
         });
 
-        it('resolves reference_to from nested field.field (createFieldRenderer wrapper)', async () => {
-            // Simulates how createFieldRenderer wraps the field: the real metadata
-            // (reference_to, reference_field, etc.) is nested inside field.field.
+        it('resolves reference_to from nested field.field (form metadata slot)', async () => {
+            // Simulates the `field.field` nesting the FORM renderer hands widgets:
+            // `renderFieldComponent` passes `field: field.field || field`, where
+            // `.field` is the declared metadata slot (objectui#3090) holding the
+            // real metadata (reference_to, reference_field, …). The test used to
+            // credit this shape to the docs-demo `createFieldRenderer` wrapper,
+            // which never produced it and no longer exists (objectui#3910); the
+            // live producer is the form path, so the coverage stands.
             const onChange = vi.fn();
             mockDataSource.find.mockResolvedValue({
                 data: [

package/src/currency.ts

@@ -12,3 +12,133 @@
  * every field/cell renderer that already depends on it.
  */
 export { resolveFieldCurrency } from '@object-ui/i18n';
+
+/**
+ * Fallback width for a currency whose digit count cannot be resolved: the
+ * literal both call sites used unconditionally before objectui#4361. It is
+ * reached only when there is no ISO code to ask about (an invalid code, or a
+ * runtime with no currency data at all), never as a policy.
+ */
+const DEFAULT_FRACTION_DIGITS = 2;
+
+/**
+ * ISO 4217 minor-unit width, memoized per currency code.
+ *
+ * The probe is deliberately made with NO locale. Measured across
+ * en-US / de-DE / ja-JP / ar-KW / zh-CN / fr-FR / pl-PL / es-ES and the runtime
+ * default, every locale answers the same digit count for the same code (USD 2,
+ * JPY 0, KWD 3, BHD 3, CLP 0, ISK 0) — the count comes from CLDR's
+ * `currencyData`, which is keyed by the currency, not by who is reading it.
+ * Dropping the locale from the probe therefore loses nothing and removes a
+ * failure mode: a malformed locale tag makes `Intl.NumberFormat` throw
+ * `RangeError: Incorrect locale information provided`, which would turn a bad
+ * LOCALE into a wrong CURRENCY width. It also makes the code the whole cache
+ * key.
+ */
+const fractionDigitsByCurrency = new Map<string, number>();
+
+/**
+ * The number of fraction digits ISO 4217 gives `currency` — 0 for JPY/KRW/CLP,
+ * 2 for USD/EUR/CNY, 3 for KWD/BHD/OMR/TND — as ICU reports it.
+ *
+ * Returns {@link DEFAULT_FRACTION_DIGITS} when the code is not a currency code
+ * at all: `Intl` throws `RangeError: Invalid currency code` for those, and the
+ * throw must not escape, or a bad code would change the width used by the
+ * callers' own bad-currency fallbacks (objectui#4332 pinned those strings). A
+ * code that is well-formed but unknown to CLDR (e.g. `ZZZ`) does not throw —
+ * ICU answers 2 for anything outside its table, which is the same default.
+ *
+ * Memoized because the currency cell renderer runs once per grid cell: measured
+ * at 24.3us per uncached probe against 0.02us cached (200k iterations, node 22),
+ * so a 500-row grid pays ~12ms per render pass for a value that cannot change.
+ */
+export function currencyFractionDigits(currency: string): number {
+  const cached = fractionDigitsByCurrency.get(currency);
+  if (cached !== undefined) return cached;
+  let digits = DEFAULT_FRACTION_DIGITS;
+  try {
+    // `maximumFractionDigits` is typed `number | undefined` on
+    // `ResolvedNumberFormatOptions` — it is absent when a format resolves with
+    // significant-digit rounding instead of fraction-digit rounding, which a
+    // bare `style: 'currency'` never does. Coalesced rather than asserted so
+    // the value is a number by construction and not by claim.
+    digits =
+      new Intl.NumberFormat(undefined, { style: 'currency', currency }).resolvedOptions()
+        .maximumFractionDigits ?? DEFAULT_FRACTION_DIGITS;
+  } catch {
+    // Not a currency code — keep the historical width and let the caller's own
+    // formatting attempt surface the bad code.
+  }
+  fractionDigitsByCurrency.set(currency, digits);
+  return digits;
+}
+
+/**
+ * Display symbols, memoized per **(locale, currency)** pair.
+ *
+ * The pair, not the code — and this is the one place this helper deliberately
+ * parts company with {@link currencyFractionDigits} above. The digit count is
+ * locale-independent (measured across eight locales, see that map's note), so
+ * its probe drops the locale and keys the cache on the code alone. The SYMBOL
+ * is genuinely locale-dependent, measured on the same runtime:
+ *
+ *   - `USD` → `$` at `en` / `en-US` / `de-DE` / `ja-JP`, `US$` at `en-GB` and
+ *     `zh-CN`, `$US` at `fr-FR`;
+ *   - `JPY` → U+00A5 at `en`, the FULLWIDTH U+FFE5 at `ja-JP`, `JP¥` at
+ *     `en-GB`, and the bare code `JPY` at `fr-FR`.
+ *
+ * Copying the code-only cache key would therefore let whichever locale asked
+ * first answer for every locale after it, for the life of the process — a
+ * silent wrong answer rather than a crash, so it is pinned by test.
+ *
+ * `|` is safe as the key separator: it appears in neither a BCP-47 tag nor an
+ * ISO 4217 code, so no two distinct pairs can collide on one key.
+ */
+const symbolByLocaleAndCurrency = new Map<string, string>();
+
+/**
+ * The string ICU renders in place of `currency` for a reader in `locale` — `$`
+ * for USD at `en`, `€` for EUR, U+00A5 for JPY — taken from the `currency` part
+ * of the very format the display path already uses.
+ *
+ * This is the ONE channel for the symbol (objectui#4414). It is not an
+ * independent opinion about how a currency should look: it is the same
+ * `Intl.NumberFormat(locale, { style: 'currency', currency })` that
+ * `formatDisplayNumber` formats amounts with, read one part at a time. So a
+ * widget that renders an amount in one mode and a bare symbol in another cannot
+ * disagree with itself — which is exactly what the hand-written
+ * `currency === 'USD' ? '$' : currency` ternary did, showing `JPY` beside a
+ * readonly `¥1,235`.
+ *
+ * Falls back to `currency` itself — the code as given — in the three cases
+ * where ICU cannot answer, because a bare code is a legitimate adornment (it is
+ * what ICU itself returns for KWD/BHD/CHF/ISK, and what
+ * `formatAmount`'s own bad-code branch renders beside it):
+ *
+ *  1. an invalid currency code — `Intl` throws `RangeError: Invalid currency
+ *     code`;
+ *  2. a malformed locale tag (`en_US` with an underscore, say) — `Intl` throws
+ *     `RangeError: Incorrect locale information provided`. `currencyFractionDigits`
+ *     dodged this failure mode by dropping the locale from its probe; this
+ *     helper needs the locale, so it catches instead. Neither throw may escape:
+ *     this runs during render, so an escaped `RangeError` is a blank widget.
+ *  3. no `currency` part in the output at all — not observed for
+ *     `style: 'currency'`, but coalesced rather than asserted.
+ */
+export function currencySymbol(currency: string, locale: string): string {
+  const key = `${locale}|${currency}`;
+  const cached = symbolByLocaleAndCurrency.get(key);
+  if (cached !== undefined) return cached;
+  let symbol = currency;
+  try {
+    // The formatted value is irrelevant — only the `currency` part is read — so
+    // the cheapest deterministic input is used.
+    const parts = new Intl.NumberFormat(locale, { style: 'currency', currency }).formatToParts(0);
+    symbol = parts.find((part) => part.type === 'currency')?.value ?? currency;
+  } catch {
+    // Bad code or bad locale — keep the code, and let the caller's own
+    // formatting attempt surface the real problem.
+  }
+  symbolByLocaleAndCurrency.set(key, symbol);
+  return symbol;
+}

package/src/datetime-widgets.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 import { DateField } from './widgets/DateField';
@@ -54,10 +55,15 @@ describe('Date/Time Widgets', () => {
         });
 
         it('calls onChange when value changes', () => {
-            const { container } = render(<DateTimeField {...baseProps} />);
+            const onChange = vi.fn();
+            const { container } = render(<DateTimeField {...baseProps} onChange={onChange} />);
             const input = container.querySelector('input[type="datetime-local"]') as HTMLInputElement;
             fireEvent.change(input, { target: { value: '2023-01-01T12:00' } });
-            expect(baseProps.onChange).toHaveBeenCalledWith('2023-01-01T12:00');
+            // The control speaks zone-less local wall clock; form state holds
+            // ISO, the shape the API hands back and `toDateTimeInputValue`
+            // reads (objectui#3127). Storing the naive string instead would put
+            // read and write on different timezone bases.
+            expect(onChange).toHaveBeenCalledWith(new Date('2023-01-01T12:00').toISOString());
         });
 
         it('renders formatted datetime in readonly mode', () => {
@@ -71,6 +77,92 @@ describe('Date/Time Widgets', () => {
         });
     });
 
+    /**
+     * objectui#3127 — the record's stored ISO value reached the native control
+     * verbatim, and `<input type="date">` / `<input type="datetime-local">`
+     * reject anything but their one exact shape SILENTLY: the attribute lands
+     * in the DOM, `.value` reads back `''`, and the user sees an empty box on a
+     * field that has a value. `.value` (not `getAttribute('value')`) is
+     * therefore the only assertion that can see this bug at all.
+     */
+    describe('existing values round-trip through the native controls (#3127)', () => {
+        // The seeded showcase value. Whole minutes and no sub-second part, so
+        // the control (which has minute resolution) can represent it exactly
+        // and the round trip below is lossless in every timezone.
+        const storedIso = '2026-06-17T14:30:00.000Z';
+
+        it('DateTimeField shows a stored ISO instant instead of an empty box', () => {
+            const { container } = render(<DateTimeField {...baseProps} value={storedIso} />);
+            const input = container.querySelector('input[type="datetime-local"]') as HTMLInputElement;
+
+            expect(input.value).not.toBe('');
+            expect(input.value).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/);
+            // The shown wall clock denotes the SAME instant as the record —
+            // asserted this way so the test holds in every timezone, which a
+            // hardcoded "2026-06-17T22:30" would not.
+            expect(new Date(input.value).getTime()).toBe(new Date(storedIso).getTime());
+        });
+
+        it('DateTimeField writes back on the same basis it reads', () => {
+            // Read and write must share one timezone basis. Displaying local
+            // while storing the naive local string is the worse bug: the value
+            // would silently drift by the viewer's offset on every edit.
+            const onChange = vi.fn();
+            const { container } = render(
+                <DateTimeField {...baseProps} onChange={onChange} value={storedIso} />
+            );
+            const input = container.querySelector('input[type="datetime-local"]') as HTMLInputElement;
+
+            fireEvent.change(input, { target: { value: '2026-06-18T09:15' } });
+
+            const written = onChange.mock.calls[0][0];
+            // Zone-QUALIFIED, which the control's own output is not. Storing
+            // the raw `2026-06-18T09:15` is what puts the write on a different
+            // basis from the read: the server has no way to know whose 09:15
+            // it is, and resolves it to a different instant than the one the
+            // user picked.
+            expect(written).toMatch(/(Z|[+-]\d{2}:\d{2})$/);
+            expect(new Date(written).getTime()).toBe(new Date('2026-06-18T09:15').getTime());
+        });
+
+        it('DateTimeField returning to the shown minute restores the exact stored value', () => {
+            // Guards the drift this fix could otherwise introduce: if the two
+            // conversions disagreed by the viewer's UTC offset, navigating away
+            // from a value and back would land somewhere else, and every open →
+            // fiddle → undo would quietly move the record.
+            // Held in real state, because a `vi.fn()` onChange would leave the
+            // control pinned to its initial prop and React would swallow the
+            // second edit as a no-op — the test would pass without exercising
+            // anything.
+            const seen: string[] = [];
+            const Host = () => {
+                const [v, setV] = React.useState<string>(storedIso);
+                seen.push(v);
+                return <DateTimeField {...baseProps} value={v} onChange={setV as any} />;
+            };
+            const { container } = render(<Host />);
+            const input = container.querySelector('input[type="datetime-local"]') as HTMLInputElement;
+            const shown = input.value;
+
+            fireEvent.change(input, { target: { value: '2026-06-18T09:15' } });
+            fireEvent.change(input, { target: { value: shown } });
+
+            expect(seen[seen.length - 1]).toBe(storedIso);
+        });
+
+        it('DateField shows the stored calendar day, ISO-shaped or not', () => {
+            // Both spellings the API may hand back for a `date` field. The day
+            // must survive verbatim — re-parsing the bare form as UTC midnight
+            // would move it to the 16th west of Greenwich.
+            for (const stored of ['2026-06-17', '2026-06-17T00:00:00.000Z']) {
+                const { container, unmount } = render(<DateField {...baseProps} value={stored} />);
+                const input = container.querySelector('input[type="date"]') as HTMLInputElement;
+                expect(input.value).toBe('2026-06-17');
+                unmount();
+            }
+        });
+    });
+
     describe('TimeField', () => {
         it('renders time input in edit mode', () => {
             const { container } = render(<TimeField {...baseProps} />);