The Sorting Ceremony · Dropdowns

A native select your framework's Select class drives happily, and a custom listbox it can't — the most common dropdown trap.

One native hat, one custom-built hat. Your Select helper only works on one of them.

Dropdowns is a medium Forms & Inputs challenge on Fun UI Playground. A native select your framework's Select class drives happily, and a custom listbox it can't — the most common dropdown trap. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “dropdown-”, and the techniques it exercises are native <select>, custom listbox widgets, role-based locators, assert selected value.

At a glance

Category
Forms & Inputs
Difficulty
medium
Teaches
native <select> · custom listbox widgets · role-based locators · assert selected value
Backend
None — runs entirely in the browser
Locators
Stable id and data-testid, prefixed dropdown-

Selectors on this page

LocatorWhat it is
select#dropdownNative: select#dropdown with a disabled placeholder and four houses
button#dropdown-custom-trigger [role="listbox"] [role="option"]Custom: button#dropdown-custom-trigger opens a [role="listbox"] with [role="option"] items
#dropdown-resultBoth write their result into #dropdown-result — assert the text there

Frequently asked questions

Why doesn't a Select helper work on this dropdown?

Because only one of the two is a native <select>. select#dropdown works with any Select class; button#dropdown-custom-trigger opens a [role="listbox"] of [role="option"] items, which is ordinary markup a Select helper cannot drive. Click the trigger, then the option.

How do I assert which option a custom listbox selected?

Don't read the trigger's label alone. Both dropdowns write their result into #dropdown-result, so assert the text there — and on the custom widget also check aria-selected on the chosen [role="option"].

More Forms & Inputs

Updated

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