The Apothecary Index · Autocomplete Combobox

Q: How do I test a debounced autocomplete without a fixed sleep?

Fill #combobox-input, then wait on state rather than the clock: aria-expanded="true", or the [role="option"] you expect inside ul#combobox-listbox. Suggestions arrive about 150 ms after the last keystroke, and ?delay= retunes that debounce for CI.

Q: Why doesn't focus move to the option when I press ArrowDown?

Because this combobox uses aria-activedescendant: focus stays on the input while the active option is named by attribute. Assert that attribute rather than DOM focus. Enter commits, Escape closes, and the committed value lands in #combobox-result.

An ARIA 1.2 autocomplete combobox with a 150ms debounce — the widget behind half the flaky "type and pick" tests in the wild.

Type three letters, wait out the debounce, pick a suggestion. The shelves judge haste.

Autocomplete Combobox is a medium Forms & Inputs challenge on Fun UI Playground. An ARIA 1.2 autocomplete combobox with a 150ms debounce — the widget behind half the flaky "type and pick" tests in the wild. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “combobox-”, and the techniques it exercises are typeahead inputs, debounced suggestions, aria-activedescendant, keyboard option selection.

At a glance

Category: Forms & Inputs
Difficulty: medium
Teaches: typeahead inputs · debounced suggestions · aria-activedescendant · keyboard option selection
Backend: None — runs entirely in the browser
Locators: Stable id and data-testid, prefixed combobox-

Selectors on this page

Locator	What it is
`#combobox-input`	Input: #combobox-input (role="combobox", aria-expanded mirrors the list state)
`ul#combobox-listbox` `[role="option"]` `#combobox-option-<n>`	Suggestions: ul#combobox-listbox with [role="option"] items #combobox-option-<n> — rendered only while matches exist
`#combobox-result`	The selection lands in #combobox-result with the ingredient's stock count

Frequently asked questions

How do I test a debounced autocomplete without a fixed sleep?

Fill #combobox-input, then wait on state rather than the clock: aria-expanded="true", or the [role="option"] you expect inside ul#combobox-listbox. Suggestions arrive about 150 ms after the last keystroke, and ?delay= retunes that debounce for CI.

Why doesn't focus move to the option when I press ArrowDown?

Because this combobox uses aria-activedescendant: focus stays on the input while the active option is named by attribute. Assert that attribute rather than DOM focus. Enter commits, Escape closes, and the committed value lands in #combobox-result.

More Forms & Inputs

Updated 2026-09-07

Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.