Skip to main content
ELYTE
MediumFrontendExtend

Add Keyboard Navigation to Dropdown

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); E...

Start problemBrowse all problems

What you will practice

HTMLCSSJavaScriptDOM & EventsCSS & LayoutAccessibilityKeyboard Navigation

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.

Starter files

index.htmlEditable template
styles.cssEditable starter
main.jsEditable starter

What the judge checks

  • Runs in the browser environment with the browser-eval runner.
  • Uses a 1500ms judge budget.
  • Requires test IDs: app, dropdown-trigger, dropdown-menu.
  • Checks repeated UI regions: dropdown-option.
  • Behavior rules include: Initial Render Required, Js Logic Required, Html Only Shortcut Disallowed, Arrow Key Navigation.

Constraints

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

Example behavior

Input
options = ["Apple", "Banana", "Cherry", "Date"]
User opens menu, presses ArrowDown twice, then Enter
Output
Trigger text changes to "Cherry", menu closes

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?