Build an autocomplete combobox

Hard45 minFree, no account

An async race, a keyboard contract, and a screen-reader announcement, in forty-five minutes.

The question

Build a text input that fetches suggestions as the user types and lets them pick one.

Keyboard: arrows move, Enter selects, Escape closes. It must announce the number of results.

Responses can arrive out of order.

<Combobox onSearch={q => fetchCities(q)} onSelect={city => ...} />

// type "lon"  → request fires after a pause
// type "lond" → the "lon" response must not overwrite this one

45:00Commit to an answer before you open the solution. Reading it first teaches you to recognise good answers, which is not the skill being tested.

Stuck?

0 of 3 hints taken

The worked solution

written by a person · not a grade

Score yourself

0 of 5 marked

Handled out-of-order responses with both cancellation and a guard30
Full keyboard contract including Escape and Tab25
Correct roles and aria-activedescendant, focus never leaving the input25
Announced result count in a live region that exists up front10
Debounced and avoided refetching known queries10

We run no AI here and nothing on this page grades you. The score is yours, and the useful number is the one you get on the same problem a month from now, cold.

kept in this browser only