Implement a Reusable Dropdown Component
Company: Coinbase
Role: Frontend Engineer
Category: Software Engineering Fundamentals
Difficulty: hard
Interview Round: Onsite
Implement a reusable dropdown component for a production frontend application using a modern framework such as React.
The component should support a clean props API and be reusable across different product surfaces. In the interview, implement the core behavior and explain which production concerns you would handle if you had more time.
Requirements:
- Render a trigger element and a dropdown menu containing selectable options.
- Allow the caller to provide options, labels, values, disabled states, and an `onChange` callback.
- Support both controlled and uncontrolled usage for the selected value and open/closed state.
- Close the menu when the user selects an item, clicks outside, or presses Escape.
- Handle keyboard navigation at a basic level.
- Be accessible enough for a real UI component: appropriate roles, focus behavior, and ARIA attributes.
- Explain how you would extend it for production concerns such as placement near screen edges, scrolling containers, portals, virtualization, theming, testing, and integration with a design system.
Quick Answer: This question evaluates skills in reusable frontend component design, including API design, state management (controlled vs uncontrolled), event handling, keyboard navigation, and accessibility (roles, focus behavior, and ARIA) for production-ready UI components.