Question 1

How do you handle click-outside in a React autocomplete?

Accepted Answer

Use useEffect to add a document click listener. Check if the click is inside the container using a ref: if (containerRef.current && !containerRef.current.contains(e.target)) setIsOpen(false). Remove the listener in the cleanup.

Question 2

How do you build an autocomplete in React?

Accepted Answer

Use useState for query, suggestions, highlight, isLoading, isOpen. Use useEffect for debounce (setTimeout in useEffect with query dependency) and click-outside listener. Use useRef for the container and debounce timer. Handle keyboard navigation in handleKeyDown.

Question 3

How do you debounce in React for an autocomplete?

Accepted Answer

Use useEffect with the query as a dependency. Set a setTimeout inside useEffect. Return () => clearTimeout(timer) as the cleanup. This creates a debounced effect that runs 300ms after the query changes.

Question 4

How do you handle keyboard navigation in a React autocomplete?

Accepted Answer

Add onKeyDown to the input. Use setHighlight with a functional update: ArrowDown -> setHighlight(h => Math.min(h + 1, suggestions.length - 1)). Enter -> onSelect(suggestions[highlight]). Escape -> setIsOpen(false).

How do you handle click-outside in a React autocomplete?

More FAQs in Autocomplete Search Bar in React

Still have questions?

Want to upskill yourself?

Small steps. Big possibilities.

Our courses are taking a Coffee break, but your curiosity shouldn't. Stay engaged with namastedev linkedin, youtube, discord and other resources while you wait.