@eifi1/ui-kit 0.12.0 → 0.13.0

package/src/components/amount-input.tsx

@@ -150,6 +150,72 @@ interface AmountInputProps {
    * it left a 36px figure 16px to live in.
    */
   align?: "start" | "center";
+  /**
+   * Decimals the committed amount is rounded to (kastlan 0.12: "12.345" and a
+   * calculator's "100/3" reached a `Numeric(10,2)` column unrounded and failed with a
+   * 422). Default: the currency's minor unit, from `Intl` (CHF and EUR 2, JPY 0). With
+   * no `currency`, nothing is rounded unless this is set. Rounding is half away from
+   * zero (12.345 → 12.35, -12.345 → -12.35) and happens when the figure settles: on
+   * blur, on Enter, and on every result the calculator writes back. Keystrokes are left
+   * alone, so "12.3" can still become "12.34".
+   */
+  digits?: number;
+  /** The smallest amount the field settles on. A lower figure is raised to it when it
+   *  settles, like `digits`. Compared with the signed figure. */
+  min?: number;
+  /** The largest amount the field settles on (a deposit release capped at the
+   *  balance). A higher figure is lowered to it when it settles. */
+  max?: number;
+}
+
+/** The currency's minor unit (CHF 2, JPY 0), or `undefined` for no currency or a code
+ *  `Intl` does not accept. */
+function currencyDigits(code: string | undefined): number | undefined {
+  if (!code) return undefined;
+  try {
+    return new Intl.NumberFormat("en", { style: "currency", currency: code }).resolvedOptions()
+      .maximumFractionDigits;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * A settled figure, rounded to `digits` (half away from zero) and clamped to
+ * `min`/`max`. Only a plain number is touched. A half-typed draft or an expression
+ * comes back as it was. Rounding works in decimal exponent notation, because
+ * `Math.round(1.005 * 100)` is 100 (1.005 is 1.00499… in binary).
+ */
+function settleAmount(text: string, digits: number | undefined, min?: number, max?: number): string {
+  const t = text.trim();
+  if (!/^-?\d*\.?\d*$/.test(t) || !/\d/.test(t)) return text;
+  let n = Number(t);
+  if (!Number.isFinite(n)) return text;
+  if (digits !== undefined) {
+    const magnitude = Number(`${Math.round(Number(`${Math.abs(n)}e${digits}`))}e-${digits}`);
+    n = n < 0 ? -magnitude : magnitude;
+  }
+  if (min !== undefined && n < min) n = min;
+  if (max !== undefined && n > max) n = max;
+  const out = formatResult(n);
+  // Unchanged figures keep their own spelling ("12.50" stays "12.50").
+  return Number(out) === Number(t) ? text : out;
+}
+
+/**
+ * The locale's decimal mark, as far as this field can type it: "," or "." (kastlan 40).
+ * The same answer `NumberField` gives, for the same reason: a mark outside those two
+ * (Arabic's "٫") is not one {@link sanitizeLive} lets through, so those locales keep
+ * the dot rather than get a field that eats the key it shows.
+ */
+function decimalMark(locale: string | undefined): "," | "." {
+  try {
+    const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === "decimal");
+    return part?.value === "," ? "," : ".";
+  } catch {
+    // An invalid tag throws a RangeError; a typo in a locale must not take the form down.
+    return ".";
+  }
 }
 
 // The consuming app's ONE money palette (`--money-expense` / `--money-income`),
@@ -186,13 +252,14 @@ const DISPLAY_INPUT_CLASS = cn(
  * sum that comes out positive still takes the chip with it; "-20+50" → "7" is not,
  * and "-20+" evaluates to nothing at all.
  */
-function isResultOf(previous: string, text: string): boolean {
+function isResultOf(previous: string, text: string, settle: (text: string) => string): boolean {
   const n = evaluateExpression(previous);
-  return n !== null && formatResult(n) === text.trim();
+  // Compared settled, since the field rounds what the calculator hands it.
+  return n !== null && settle(formatResult(n)) === text.trim();
 }
 
 export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
-  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames }, ref) => {
+  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max }, ref) => {
     const generatedId = useId();
     const fieldId = id ?? generatedId;
     const invalid = Boolean(invalidProp) || ariaInvalid === true || ariaInvalid === "true";
@@ -230,6 +297,20 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     // minus and has to survive keystroke-for-keystroke.
     const signOwned = onNegativeChange !== undefined;
     const shown = signOwned && negative && isBareAmount(value) ? `-${value}` : value;
+    // What the user SEES is `shown` with the locale's decimal mark (kastlan 40: a
+    // fr-CH user typed "1,5" and watched it turn into "1.5" under their fingers). Display only — `value`, `onChange`, the sign split and the settle all
+    // stay dot-decimal, because that string is the contract: RhfMoneyField's
+    // `parseAmount`, every app's `Number(value)` and the calculator's evaluator read
+    // it. The way back is free: {@link sanitizeLive} already folds a typed "," into
+    // ".", so a comma typed, pasted or tapped on the numpad lands as a dot.
+    //
+    // One character for one character, and no digit grouping: the caret stays where
+    // the typist put it, and "1.000" cannot be read back as a thousand in one locale
+    // and as one in the other. de-CH and it-CH are "." — CLDR says so, and this
+    // follows `Intl` rather than a guess about a country.
+    const locale = useKitLocale();
+    const mark = decimalMark(locale);
+    const display = mark === "," ? shown.replace(/\./g, ",") : shown;
     // Every route into the field — typing, the numpad sheet, the desktop
     // calculator, the blur/Enter commit — funnels through here, so the split is
     // written once and the four entry paths cannot drift.
@@ -239,6 +320,8 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     // edit the field's own text that is simply what the field was showing; the
     // desktop calculator keeps its expression in a popover the field never sees,
     // so it passes it in (see `CalculatorButton`'s `onChange`).
+    const digits = digitsProp ?? currencyDigits(currency);
+    const settle = (text: string) => settleAmount(text, digits, min, max);
     const handleText = (raw: string, previous: string = shown) => {
       const text = sanitizeLive(raw);
       if (!signOwned) {
@@ -249,7 +332,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
       if (sign) {
         // SET, not flip: re-reporting the same sign on every keystroke is a no-op.
         onNegativeChange(sign === "-");
-      } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text)) {
+      } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text, settle)) {
         // A calculation that just RESOLVED states its sign in both directions. The
         // figure it ran on is the SIGNED one the user could see — "-12+30" is +18 —
         // so a positive result has to move the chip too, or the field would answer
@@ -262,7 +345,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
       }
       onChange(sign ? rest : text);
     };
-    const commit = () => handleText(commitExpression(shown));
+    const commit = () => handleText(settle(commitExpression(shown)));
     const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();
     // The chip the currency list hangs off (Keksdose dev#548). It is portalled now, so
     // the panel needs a real trigger rect rather than a relative parent — see
@@ -281,7 +364,6 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     }, [labels?.currency, labels?.currencySearch]);
     const currencyText = useKitLabels("currency", DEFAULT_CURRENCY_LABELS, currencyOverrides);
     const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-    const locale = useKitLocale();
 
     const selected = getCurrency(currency);
     const filtered = useMemo(() => {
@@ -321,7 +403,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
           // needs: a zero to aim at, at full size. The caller supplies it because
           // only the app knows the locale's decimal separator.
           placeholder={asDisplay ? (placeholder ?? "0") : label !== undefined ? " " : placeholder}
-          value={shown}
+          value={display}
           onChange={(e) => handleText(e.target.value)}
           onFocus={() => setFocused(true)}
           onBlur={() => {
@@ -387,8 +469,10 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
         >
           {showCalc && (
             <CalculatorButton
-              value={shown}
-              onChange={handleText}
+              // The mark the field shows, as NumberInput hands its calculator; the
+              // evaluator reads either, and its result comes back dot-decimal.
+              value={display}
+              onChange={(result, expression) => handleText(settle(result), expression)}
               className="px-1.5"
               ariaLabel={labels?.calculatorTrigger}
               labels={labels?.calculator}
@@ -470,11 +554,14 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
         </div>
         {showNumpad && (
           <NumberPadSheet
-            value={shown}
+            // Localised like the field it mirrors; its keys come back through
+            // `sanitizeLive`, so the "." key and a "," both land as a dot.
+            value={display}
             onChange={handleText}
             onDone={() => innerRef.current?.blur()}
             label={label}
             labels={labels?.pad}
+            decimalMark={mark}
           />
         )}
       </div>

package/src/components/bulk-action-bar.tsx

@@ -99,8 +99,16 @@ export interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<"div">
   open?: boolean;
   /** Clear the selection / leave selection mode. */
   onClear: () => void;
-  /** The actions: buttons (`IconButton size="lg"` on a phone, `Button` from md up),
-   *  in the caller's order. They are the toolbar's arrow-key stops, after the clear. */
+  /**
+   * The actions: buttons (`IconButton size="lg"` on a phone, `Button` from md up),
+   * in the caller's order. They are the toolbar's arrow-key stops, after the clear.
+   *
+   * LINKS rove too (keksdose F8): a `<Button href>` — "View report", which navigates
+   * rather than acts — is an `<a href>`, and it is one more arrow-key stop in its place
+   * among the buttons, not a second Tab stop beside the toolbar's one. A disabled
+   * `<Button href disabled>` has no `href` and is skipped, as a disabled button is. Any
+   * other focusable of your own joins with `data-toolbar-item`.
+   */
   children?: ReactNode;
   /** Default `floating`. See {@link BulkActionBarVariant}; an object picks one per
    *  breakpoint, see {@link ResponsiveBulkActionBarVariant}. */
@@ -135,7 +143,12 @@ const FLOATING_STYLE: CSSProperties = {
 
 /** What the arrow keys walk: the toolbar's enabled controls. Matched by element, not by
  *  `tabindex`, because the roving below sets every one but the current to `-1` — a
- *  custom control joins with `data-toolbar-item`. */
+ *  custom control joins with `data-toolbar-item`.
+ *
+ *  `a[href]` is here on purpose (keksdose F8, a "View report" `Button href` in the bar):
+ *  a link in a toolbar is a toolbar item like any other, and left out it would keep its
+ *  own Tab stop, so Tab would stop twice in a bar that promises one. `[href]` rather than `a`: the kit's disabled link is an `<a>`
+ *  WITHOUT one, and is skipped as a disabled button is. */
 const ITEMS =
   "button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[data-toolbar-item]";
 

package/src/components/chart.tsx

@@ -8,7 +8,7 @@
 // The value on show is the *structure*: config-driven colors injected as CSS
 // vars, muted axis/grid styling, and a polished tooltip/legend — the things
 // that make shadcn charts read as "designed" rather than "default Recharts".
-import { createContext, useContext, useId, useRef } from "react";
+import { createContext, useContext, useId, useLayoutEffect, useRef, useState } from "react";
 import type { ComponentProps, CSSProperties, ReactNode, RefObject } from "react";
 import {
   Legend as RechartsLegend,
@@ -263,7 +263,7 @@ export function ChartTooltipContent({
   // `ChartTooltip` keeps null values (so they can print "—"), which also keeps the
   // series a legend toggle switched off with `hide`; those go here instead.
   const items = includeHidden ? payload : payload?.filter((item) => item.hide !== true);
-  if (!active || !items?.length) return null;
+  const visible = Boolean(active && items?.length);
   // Recharts anchors the tooltip at coordinate.x inside the full (scrolled) chart
   // width; subtract the container's scrollLeft to get its on-screen x, then flip
   // left if the tooltip's own width would run past the visible right edge.
@@ -272,16 +272,27 @@ export function ChartTooltipContent({
   // `ChartContainer`), but an RTL scroller counts `scrollLeft` from its right edge —
   // 0 at the start, negative going left — so there the content's left edge sits
   // `scrollWidth - clientWidth + scrollLeft` px to the left of the visible one.
-  let flip = false;
-  const boundary = boundaryRef?.current;
-  if (boundary && coordinate?.x != null) {
+  //
+  // Measured in a layout effect (the DOM is not readable during render), so it commits
+  // before paint. `payload` and `label` are deps because they change the tooltip's own
+  // width, and recharts hands a fresh `payload` on every tooltip render, so a scroll
+  // followed by any re-render is re-measured just as it was when this ran in render.
+  const [flip, setFlip] = useState(false);
+  const x = coordinate?.x;
+  useLayoutEffect(() => {
+    const boundary = boundaryRef?.current;
+    if (!visible || !boundary || x == null) {
+      setFlip(false);
+      return;
+    }
     const offset = isRtl(boundary)
       ? boundary.scrollWidth - boundary.clientWidth + boundary.scrollLeft
       : boundary.scrollLeft;
-    const visibleX = coordinate.x - offset;
+    const visibleX = x - offset;
     const tipWidth = tipRef.current?.offsetWidth ?? 160;
-    flip = visibleX + tipWidth + 12 > boundary.clientWidth;
-  }
+    setFlip(visibleX + tipWidth + 12 > boundary.clientWidth);
+  }, [visible, x, boundaryRef, payload, label]);
+  if (!visible || !items) return null;
   return (
     <div
       ref={tipRef}

package/src/components/chip.tsx

@@ -621,6 +621,9 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
   }
 
   return (
+    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are
+       the roving-focus hooks, live only when the container passes `role` and `tabIndex`
+       (ChipInput does); the role is a prop, so the rule cannot see it. */
     <span
       ref={ref as React.Ref<HTMLSpanElement>}
       className={look}
@@ -893,6 +896,9 @@ export function ChipInput({
           {label}
         </label>
       )}
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- a
+          pointer convenience that widens the input's hit area to the whole field; the
+          keyboard path is the <input> itself, which is in the tab order. */}
       <div
         // `relative` so the live region below can be `sr-only` without escaping to the
         // initial containing block and inflating the document height.

package/src/components/combobox-core.tsx

@@ -261,7 +261,9 @@ export interface ComboboxCore<V extends string | number> {
   rect: AnchorRect | null;
   /** Where the dropdown goes, clamped to the visible viewport (feedback #135). */
   placement: AnchoredPanel;
-  cacheRef: RefObject<Map<V, ComboOption<V>>>;
+  /** Put an option in the label cache, so {@link ComboboxCore.resolve} still knows a
+   *  value the caller just chose after the result list has moved on. */
+  rememberOption: (o: ComboOption<V>) => void;
   resolve: (v: V) => ComboOption<V> | null;
   /** Close and hand focus back to the trigger — the keyboard paths only. See
    *  {@link useDropdown} for why a pointer dismissal must not do this. */
@@ -319,10 +321,23 @@ export function useComboboxCore<V extends string | number>({
   useOutsideClick([triggerRef, panelRef], close, open && !isPhone);
   useEscapeKey(closeToTrigger, open);
 
-  // Reset the query + focus the search box each time the panel opens.
+  // Reset the query each time the panel opens, and the highlighted row whenever the
+  // visible set changes (a new query, or the panel opening or closing). Adjusted while
+  // rendering against the previous values rather than in an effect, so the render that
+  // opens the panel already searches for "" and highlights the first row.
+  const [prevOpen, setPrevOpen] = useState(open);
+  const [prevQuery, setPrevQuery] = useState(query);
+  if (open !== prevOpen || query !== prevQuery) {
+    const opened = open && !prevOpen;
+    setPrevOpen(open);
+    setPrevQuery(opened ? "" : query);
+    if (opened) setQuery("");
+    setActive(0);
+  }
+
+  // Focus the search box each time the panel opens.
   useEffect(() => {
     if (!open) return;
-    setQuery("");
     const id = requestAnimationFrame(() => inputRef.current?.focus());
     return () => cancelAnimationFrame(id);
   }, [open]);
@@ -346,11 +361,9 @@ export function useComboboxCore<V extends string | number>({
   }, [options, results]);
   const resolve = (v: V): ComboOption<V> | null =>
     options?.find((o) => o.value === v) ?? cacheRef.current.get(v) ?? null;
-
-  // Reset the highlighted row whenever the visible set changes.
-  useEffect(() => {
-    setActive(0);
-  }, [query, open]);
+  const rememberOption = (o: ComboOption<V>) => {
+    cacheRef.current.set(o.value, o);
+  };
 
   return {
     triggerRef,
@@ -369,7 +382,7 @@ export function useComboboxCore<V extends string | number>({
     minChars,
     rect,
     placement,
-    cacheRef,
+    rememberOption,
     resolve,
     closeToTrigger,
   };
@@ -777,6 +790,9 @@ export function ComboboxPanel<V extends string | number>({
         inputRef={inputRef}
         closeLabel={closeLabel}
       >
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused
+            itself: it catches the listbox keys bubbling from the sheet's search <input>,
+            which holds focus while the list is up. */}
         <div onKeyDown={onKeyDown} className="relative">
           {list}
           {announcement}
@@ -796,6 +812,9 @@ export function ComboboxPanel<V extends string | number>({
       : { left: rect.left };
 
   return createPortal(
+    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused
+       itself: it catches the listbox keys bubbling from the search <input> inside it,
+       which holds focus while the panel is open. */
     <div
       // Spread FIRST: `onKeyDown` below is the listbox keyboard (Up/Down/Home/End/
       // Enter/Tab) and the placement is measured rather than chosen, so neither is a

package/src/components/combobox.tsx

@@ -420,6 +420,7 @@ export function Combobox({
           aria-required={ariaRequired}
           autoComplete="off"
           disabled={disabled}
+          // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.
           autoFocus={autoFocus}
           onBlur={onBlur}
           onMouseDown={primaryOnly.onMouseDown}
@@ -913,6 +914,7 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
           aria-required={ariaRequired}
           autoComplete="off"
           disabled={disabled}
+          // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.
           autoFocus={autoFocus}
           // `inputMode="none"` rather than readOnly, for the same reason Combobox
           // above gives: the sheet carries the keyboard, and a readOnly field would

package/src/components/data-table-filter-popover.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn";
 import { MiniCalendar } from "./mini-calendar";
@@ -53,6 +54,15 @@ export function FilterPopover<T>({
   // No `"en"` fallback any more: that pinned the calendar to English in a table that
   // was never handed a locale, under a provider that had one.
   const locale = useKitLocale(localeProp);
+  // What `autoFocus` did, done by hand: a callback ref runs in the same commit phase
+  // React's own autofocus does, once when the input mounts (it is stable across
+  // renders, so a re-render does not re-take focus).
+  const focusOnMount = useCallback(
+    (el: HTMLInputElement | null) => {
+      if (el && autoFocus) el.focus();
+    },
+    [autoFocus],
+  );
   const filter = resolveFilter(column);
   if (!filter) return null;
 
@@ -80,11 +90,9 @@ export function FilterPopover<T>({
         <input
           type="text"
           // A prop now, defaulting to what the popover needs; see `autoFocus` on the
-          // props above. Deliberately NOT an eslint-disable: `jsx-a11y/no-autofocus` is
-          // one of the config's ratcheted warnings and this is still one of the four it
-          // counts, because the default here is still to take focus. Silencing it would
-          // shrink the backlog without emptying it.
-          autoFocus={autoFocus}
+          // props above. Focused by `focusOnMount` rather than the `autoFocus`
+          // attribute, because here taking focus is the default, not an opt-in.
+          ref={focusOnMount}
           value={v.q}
           onChange={(e) => onChange({ type: "text", q: e.target.value })}
           placeholder={labels.filterPlaceholder}

package/src/components/data-table.tsx

@@ -1548,6 +1548,9 @@ export function DataTable<T>({
           {cardInner}
         </RowLink>
       ) : (
+        /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are
+           only attached when `interactive`, and then so are role="button", tabIndex 0 and the
+           Enter/Space handler below; the rule cannot follow the conditional role. */
         <div
           role={interactive ? "button" : undefined}
           tabIndex={interactive ? 0 : undefined}
@@ -1918,6 +1921,9 @@ export function DataTable<T>({
                       )}
                     </div>
                     {resizable && col.key !== ROW_ACTIONS_KEY && (
+                    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a
+                       pointer-only drag handle for a visual preference (column width); it is
+                       deliberately not a tab stop, and no content or action depends on it. */
                     <span
                       role="separator"
                       aria-orientation="vertical"

package/src/components/entity-combobox.tsx

@@ -137,7 +137,7 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
     create: createLabel,
   });
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-  const { open, results, resolve, setOpen } = core;
+  const { open, results, resolve, setOpen, rememberOption, query, triggerRef } = core;
   // One id per instance, generated here rather than in the core: `aria-controls` on
   // the trigger has to name the list while the list is still closed, so the id
   // belongs to whoever renders both ends of it.
@@ -146,7 +146,7 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
   // The clear value is "nothing selected" too, whichever one the caller picked.
   const chosen: V | null = value == null || value === clearValue ? null : (value as V);
   const selectedOption = chosen == null ? null : resolve(chosen);
-  const q = core.query.trim();
+  const q = query.trim();
   const showCreate =
     Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());
   const showClear = Boolean(clearable && chosen != null && !disabled);
@@ -154,7 +154,7 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
   const triggerText = selectedOption?.label ?? placeholder ?? "";
 
   const choose = (o: ComboOption<V>) => {
-    core.cacheRef.current.set(o.value, o);
+    rememberOption(o);
     onChange(o.value);
     // Back to the trigger, not to <body>: the panel that held focus is about to
     // unmount, and a keyboard user who just answered this field should be standing
@@ -170,7 +170,7 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
     <div {...rest} className={cn("relative", className)}>
       {label !== undefined && <FieldLabel>{label}</FieldLabel>}
       <button
-        ref={core.triggerRef}
+        ref={triggerRef}
         id={id}
         type="button"
         // A combobox, not a button. The distinction is not pedantry: this control
@@ -237,6 +237,9 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
           </span>
         </span>
         {showClear ? (
+          /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside
+              the trigger <button>, so it never holds focus and a key handler here could
+              never fire; the keys go to the trigger. A pointer shortcut only. */
           <span
             role="button"
             tabIndex={-1}