Components › Forms & input › Select › Product picker

Product picker

beta

Product field: product chips plus Add, built on the canonical RecordSelect in adding mode, with free text.

3 Oct 2026 (AD): deprecated → beta. The duplicate shell is gone (AddRefMenu removed, 4a9a934e0; ProductPicker on RecordSelect since 1 Oct); it is a composition over RecordSelect, not a second picker. Migrating its consumers would rebuild the same composition each time. Canon after: move into @acrm/ui with stories (Default · States · Composition) + baselines, usage/a11y rewritten. 3 Oct 2026: shell is DS.RecordRefField in @acrm/ui (acrm !4502); EntityPicker / ProductPicker are data wrappers around it, DOM 1:1. Focus returns to Přidat on close. Registry repaired 17 Oct 2026 (review F1): AddRefMenu.tsx is gone from main (file reference dropped). Registry repaired 17 Oct 2026 (review F2): removed classes with no CSS definition and no TSX use on main: .acrm-popover.eref-add-pop.

Used in 3 files · 3 areas · 3× — components/EntityPicker, components/assistant, components/callwrapup

Keyboard

  • Same as Entity picker: button.add-ref opens with Enter or Space and focuses the search; typing searches from 2 characters (debounce 180 ms).
  • Enter in the search picks the first product; the free-text row only when no product is listed. Nothing is picked while results are loading.
  • Arrow keys, Home and End move between rows including the free-text row (canonical Popover); rows are Tab stops; Enter or Space picks.
  • Multi: the panel stays open and the search keeps focus after a pick. multi={false}: a pick closes the panel.
  • Esc or click outside closes the panel.

ARIA

  • Trigger aria-haspopup="listbox", aria-expanded.
  • Panel = Record select: search input with aria-label; list role="listbox" with aria-label (label or "Produkty"); rows button[role="option"] with aria-selected="false".
  • Product status is text in sub ("koncept", "ke schválení"), part of the row name — not colour.
  • Error state carries a retry button with its own name.

Focus

  • On close (Esc, outside click, max reached) focus returns to „Přidat“ (DS.RecordRefField, acrm !4502).
  • Foundation ring on .add-ref, rows and token "×"; search input without its own ring.
  • After a pick in multi mode focus stays in the search.

Contrast

Record select tokens: name 17.59:1 (light) / 14.53:1 (dark); sub --fg-secondary ≥ 4.5:1 (light, #707477) / 6.2:1 (dark); empty and loading text --fg-muted 2.85:1 / 3.63:1.

Known limits

  • No live region for loading or result count changes.
  • Empty and loading text use --fg-muted on purpose: supplementary text stays light (owner, 3 Oct 2026).

Source: docs/select/product-picker.a11y.md · GitLab