Implement correctly
Build Combobox without breaking its behavior
# Implement Combobox in your agent ## Objective Implement Combobox for this verified behavior: A value control with an associated popup; it can be editable or select-only, and the popup can be a listbox, grid, tree, or dialog. ## Prerequisites - Inspect the repository, design system, and existing tests first. - Preserve unrelated changes and keep the file scope bounded. - Confirm that Combobox matches the need before writing code. ## Required behavior - The value control owns or controls an associated popup, exposes its expanded state and follows the keyboard model of the popup role. - Escape closes the temporary surface and returns focus to a sensible control. ## States to cover - Combobox idle - Suggestions open - City committed ## Accessibility - ARIA role: combobox + popup (listbox | grid | tree | dialog) - The primary control or named region for Combobox has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names. - In this editable listbox-popup specimen, DOM focus remains in the input while the active-option relationship communicates list navigation; other popup roles follow their own focus model. - Escape closes an open popup without committing a new value; whether text is preserved and which other actions close it are defined by the combobox subtype. - The combobox name, value, expanded state, popup relationship and relevant active or selected popup item are exposed; loading and result counts apply when the subtype provides them. - In this editable listbox-popup specimen, typing edits the query - Arrow Down and Up move the active option while focus remains in the input - Enter commits the active option - Escape closes suggestions without clearing text ## When not to use - A short native Select is simpler - No associated popup or disclosed assistance is needed ## Acceptance criteria - Editable or select-only behavior is explicit - The popup role and ownership relationship are explicit - Focus and keyboard behavior match the popup role - Escape closes the popup without committing a new value ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
- @base-ui/react
- Requires · Access to the repository, design system, and tests
Why it works
- The need is tied to canonical behavior before any technical choice.
- States, accessibility, and non-goals prevent a merely visual implementation.
- Acceptance criteria and the output format make verification observable.
Try next
Verify Combobox on a real journey
# Verify Combobox after implementation ## Objective Audit the Combobox implementation against its behavior, states, and accessibility requirements without changing it automatically. ## Checks - Replay the smallest representative journey. - Check keyboard behavior, focus, accessible name, and announcements. - Tie each gap to a specific acceptance criterion. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
sha256:5edbd9e0208c72ed2f69f7cdd705ff848ed134ca312286d11c1f3e66b5417456