Type Component: Build a Reusable Typeahead/Autocomplete Input Component

Question

## Round 1 - Coding (Frontend)

## Problem

Build a `TypeaheadInput` component (vanilla JS or React) that:

1. Accepts a `fetchSuggestions(query: string) -> Promise<string[]>` prop.
2. Debounces the fetch by 300ms after the user stops typing.
3. Displays suggestions in a dropdown below the input.
4. Arrow keys navigate the dropdown; Enter selects; Escape closes.
5. Clicking outside the dropdown closes it.

```javascript
// React signature
function TypeaheadInput({ fetchSuggestions, onSelect, placeholder }) {
  // state: query, suggestions, selectedIndex, isOpen
  // effects: debounce, click-outside listener
}
```

```
User types "re" -> debounce 300ms -> fetchSuggestions("re") -> ["react", "redux", "remix"]
Dropdown opens with 3 items.
ArrowDown -> selectedIndex=0 ("react" highlighted)
ArrowDown -> selectedIndex=1 ("redux" highlighted)
Enter      -> onSelect("redux"), dropdown closes.
```

## Follow-ups

1. How do you handle a race condition where a slow fetch for "r" resolves after a faster fetch for "re"?
2. Add keyboard accessibility: aria-activedescendant, role="listbox", role="option". Where do these attributes go?
3. The component is used in a modal with overflow:hidden on the parent. The dropdown gets clipped. How do you fix this?
4. How would you cache suggestions so repeated identical queries skip the network call?

Type Component: Build a Reusable Typeahead/Autocomplete Input Component

Question Details

Full Details

Topics

More from Databricks