Навигация с клавиатуры в списках подсказок

Привяжите обработчик клавиатуры к событию onKeyDown на элементе ввода, а не к onKeyPress (устарело) или onKeyUp. Событие keyDown срабатывает до появления символа в поле ввода, что позволяет перехватить ArrowDown, ArrowUp, клавишу ввода и клавишу выхода до того, как браузер применит их стандартное действие.

Когда пользователь нажимает ArrowDown, увеличивайте selectedIndex на 1, ограничивая его максимальным значением suggestions.length - 1: setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)). Также вызывайте e.preventDefault(), чтобы курсор не перемещался в конец текста поля ввода — таково стандартное поведение браузера для ArrowDown в текстовых полях.

Когда пользователь нажимает ArrowUp, уменьшайте selectedIndex на 1, ограничивая его минимальным значением 0: setSelectedIndex(prev => Math.max(prev - 1, 0)). Также можно ограничивать значение до -1 (нет выбора) при попытке подняться выше индекса 0, позволяя пользователю снять выбор и свободно вернуться к вводу текста.

Если нажата клавиша ввода и selectedIndex >= 0, выберите выделенную подсказку: установите inputValue в значение suggestions[selectedIndex], закройте раскрывающийся список и сбросьте selectedIndex в -1. Если ни одна подсказка не выделена (selectedIndex равен -1), разрешите обычную отправку формы или выполнение поиска.

При нажатии клавиши выхода закройте раскрывающийся список, установив isOpen в false, и сбросьте selectedIndex в -1. Не очищайте значение поля ввода — пользователь хочет лишь скрыть подсказки без выбора, сохранив введенный текст для дальнейшего редактирования.

При нажатии клавиши табуляции закройте раскрывающийся список, поскольку браузер в любом случае переведет фокус на следующий доступный для фокуса элемент. Установка isOpen в false при нажатии клавиши табуляции гарантирует, что список не останется открытым после ухода фокуса из поля ввода. Вызывать preventDefault() не нужно — позвольте браузеру управлять естественным порядком перехода по элементам.

Выделенная подсказка должна заметно отличаться визуально. Применяйте активный стиль к подсказке с индексом selectedIndex: className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}. Активное состояние обычно меняет цвет фона, благодаря чему понятно, какой элемент будет выбран при нажатии клавиши ввода.

Если для списка подсказок задана максимальная высота и он прокручивается, выделенный элемент может выйти за пределы экрана при навигации с клавиатуры. Используйте массив ссылок для хранения элементов подсказок DOM и вызывайте listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) при каждом изменении selectedIndex. Значение nearest для блока минимизирует объем прокрутки.

Когда поле ввода изменяется и появляется новый отфильтрованный список, сбрасывайте selectedIndex в -1 в том же обновлении состояния или в useEffect, зависящем от списка подсказок. Устаревшие индексы, указывающие на удаленные элементы, приведут к тому, что пользователь выберет неправильную подсказку.

Полный сценарий взаимодействия: пользователь вводит текст для фильтрации, ArrowDown выделяет первый элемент, повторные нажатия ArrowDown перемещают выделение по списку, ArrowUp перемещает его вверх, клавиша ввода выбирает выделенный элемент, а клавиша выхода закрывает список без выбора. Это охватывает все стандартные способы взаимодействия с клавиатурой, которых пользователи ожидают от поля автодополнения.

Всегда вызывайте e.preventDefault() при обработке ArrowDown и ArrowUp внутри текстового поля ввода. Без этого ArrowDown перемещает курсор в конец текста, а ArrowUp — в его начало. Такое перемещение курсора конфликтовало бы с навигацией по индексу выбранного элемента и создавало бы непонятное поведение.

Что должно произойти, когда пользователь нажимает клавишу ввода, если на позиции selectedIndex = 2 выделена подсказка?

Обрабатывайте onKeyDown у поля ввода. ArrowDown увеличивает значение selectedIndex, не превышая максимум, ArrowUp уменьшает его, не опускаясь ниже 0 или -1, Enter выбирает выделенный элемент, Escape закрывает список без выбора, а Tab закрывает его и позволяет браузеру переместить фокус. Всегда вызывайте preventDefault для клавиш со стрелками и прокручивайте выделенный элемент так, чтобы он оказался в области просмотра.