Keyboard Navigation in Suggestion Lists

Attach the keyboard handler to the onKeyDown event on the input element, not onKeyPress (deprecated) or onKeyUp. keyDown fires before the character appears in the input, which allows you to intercept ArrowDown, ArrowUp, Enter, and Escape before they have any default browser effect.

When the user presses ArrowDown, increment selectedIndex by 1, clamped to a maximum of suggestions.length - 1: setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)). Also call e.preventDefault() to stop the cursor from jumping to the end of the input text, which is the default browser behavior for ArrowDown in text inputs.

When the user presses ArrowUp, decrement selectedIndex by 1, clamped to a minimum of 0: setSelectedIndex(prev => Math.max(prev - 1, 0)). You may also choose to clamp to -1 (no selection) when going above index 0, allowing the user to "deselect" and return to typing freely.

When Enter is pressed and selectedIndex >= 0, select the highlighted suggestion: set inputValue to suggestions[selectedIndex], close the dropdown, and reset selectedIndex to -1. If no suggestion is highlighted (selectedIndex is -1), allow the normal form submit or search action to proceed.

When Escape is pressed, close the dropdown by setting isOpen to false and reset selectedIndex to -1. Do not clear the input value — the user just wants to dismiss the suggestions without selecting one, keeping their typed text for further editing.

When Tab is pressed, close the dropdown because the browser will move focus to the next focusable element anyway. Setting isOpen to false on Tab ensures the dropdown does not remain open after focus leaves the input. You do not need to call preventDefault() — let the browser handle the natural tab order.

The highlighted suggestion must be visually distinct. Apply an active style to the suggestion at selectedIndex: className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}. The active state typically uses a background color change, making it clear which item will be selected if Enter is pressed.

When the suggestion list has a max-height and scrolls, the highlighted item may scroll off screen during keyboard navigation. Use a ref array to store suggestion DOM elements and call listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) whenever selectedIndex changes. The nearest block value minimizes scroll amount.

When the input changes and a new filtered list appears, reset selectedIndex to -1 in the same state update or in a useEffect that depends on the suggestions. Stale indices pointing to removed items would cause the user to select the wrong suggestion.

The complete user flow: user types to filter, ArrowDown highlights first item, more ArrowDown moves through the list, ArrowUp moves back up, Enter selects the highlighted item, Escape dismisses without selecting. This covers all standard keyboard interaction patterns users expect from an autocomplete field.

Always call e.preventDefault() when handling ArrowDown and ArrowUp inside a text input. Without it, ArrowDown moves the text cursor to the end and ArrowUp moves it to the beginning. These cursor movements would conflict with your selected index navigation, creating confusing behavior.

What should happen when the user presses Enter with a suggestion highlighted at selectedIndex = 2?

Handle onKeyDown on the input. ArrowDown increments selectedIndex (clamped at max), ArrowUp decrements (clamped at 0 or -1), Enter selects the highlighted item, Escape closes without selecting, Tab closes and lets browser move focus. Always preventDefault on arrow keys and scroll the highlighted item into view.