pierrelf.com
Summary#
Implement the interactive dropdown/popup menu for `` elements. Details# Single select# Click on the select control opens a dropdown popup menu Dropdown displays all `` elements as a vertical list `` renders as a non-selectable label/header within the list Clicking an option selects it and closes the dropdown Selected option text displays in the select control Escape key closes dropdown without changing selection Arrow keys navigate options while dropdown is open Type-ahead: typing characters jumps to matching option Multiple select (``)#
- Renders as a scrollable listbox (not a dropdown)
- Click selects an option (deselects others)
- Cmd+Click toggles an option without deselecting others
- Shift+Click selects a range
- `size` attribute controls visible row count
DOM interface#
- `select.value` returns value of first selected option
- `select.selectedIndex` returns index of first selected option
- `select.options` returns HTMLOptionsCollection
- `select.selectedOptions` returns selected options
- `change` event fires when selection changes
Dropdown rendering#
- Popup positioned below (or above if near viewport bottom) the select control
- Popup overlays other content (painted on top layer)
- Highlighted option follows mouse hover or keyboard navigation
- Disabled options rendered grayed and non-selectable
Acceptance criteria#
- Single select opens/closes dropdown on click
- Options are selectable via click and keyboard
- Selected option displays in the collapsed control
- Multiple select renders as a listbox with multi-selection support
- `select.value`, `selectedIndex`, and `selectedOptions` work correctly
- `change` events fire on selection changes
- Dropdown positions correctly relative to the select control
- Type-ahead navigation works
- Tests cover single/multiple selection, keyboard navigation, and DOM interface
Dependencies#
- Form element parsing and DOM interfaces
- Form control rendering
- Focus management and tab navigation