CodStak Weekly Challenge #12: Custom Dropdown with Keyboard Navigation

React Interview Question

Hey Coders,

Those of you who had registered for first community cohort, I have been sending emails, so please book your spot before Feb 25th as Cohort 1 is starting on March 1st. Please go to codstak.com/community to register.

Now, back to our weekly challenge

Here is the today’s question

Create a custom dropdown component in React + TypeScript that allows users to:

Open and close the dropdown by clicking a button. Navigate through options using the E (up) and D (down) keys. Select an option using the Enter key. Close the dropdown by pressing Escape or clicking outside.

Requirements

✅ Render a dropdown with a list of selectable options.

✅ Clicking the button should toggle the dropdown open/closed.

Keyboard navigation:

Press D to move down the list.

Press E to move up the list.

Press Enter to select the highlighted option.

Press Escape to close the dropdown.

Clicking outside the dropdown should close it.

Highlight the currently selected option with a different background color.

👉You can access the question here

That’s all for this week.

Will see you next week

---