Problem 13

Add Keyboard Navigation to Dropdown

MEDIUMEXTEND

DOM & Events+2

The starter code has a dropdown that opens/closes on click and supports mouse selection. Extend it with keyboard navigation without breaking mouse behavior. Add: ArrowDown/ArrowUp moves the highlight (no wrap-around); Enter selects the highlighted option or opens the menu if closed; Escape closes without selecting. The highlighted option must have data-highlighted="true" so CSS can style it.

Examples

Example 1

Input

options = ["Apple", "Banana", "Cherry", "Date"]
User opens menu, presses ArrowDown twice, then Enter

Output

Trigger text changes to "Cherry", menu closes

Constraints

Arrow keys must not scroll the page while the menu is open
Existing click behavior must not break

Follow-up

Can you add type-ahead: when the user types a letter while the menu is open, jump to the first option starting with that letter?

Hints

Console output will appear here...