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.

Requirements

Keep the existing mouse open, close, and selection behavior working.
ArrowDown and ArrowUp must move the highlighted option without wrap-around.
Enter must open the menu when closed or select the highlighted option when open.
Escape must close the menu without changing the selected option.
The highlighted option must have data-highlighted="true".
Keep the required dropdown data-testid attributes intact.

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

Related Practice

Track

Frontend Fundamentals

Keep moving through related frontend fundamentals problems and build a stronger search-friendly practice loop around this topic.

Console output will appear here...