Autocomplete
Поле ввода с подсказками в выпадающем списке.
Использование
Расширенная версия компонента TextField. Добавилась возможность использования выпадающего списка с подсказками.
По умолчанию подсказки фильтруются вне зависимости от регистра. Но это можно изменить, прокинув свой коллбэк filter.
Все пропсы, которые поддерживает компонент TextField также поддерживаются и здесь.
Формат подсказок suggestions следующий:
type SuggestionItem = {
/**
* Метка-подпись к подсказке
*/
label: string;
/**
* Слот для контента слева
*/
contentLeft?: ReactNode;
/**
* Слот для контента справа
*/
contentRight?: ReactNode;
};
Примеры
- Default
- Controlled
- Infinite Loading
- Custom Filter
- Empty State
- Portal
- Virtual
- Render item
Это пример с бесконечным лоадингом подсказок в списке. Для удобства порог для открытия списка подсказок понижен до 0 (открываться будет сразу при фокусе).
Пример кастомной фильтрации на бекенде. Не забываем отключить дефолтную фильтрацию.
Если произошла ошибка, или же к примеру нужно показать некую информацию пользователю, то для этой цели можно использовать компонент EmptyState.
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.
Для такой реализации имеется пропс portal, который принимает либо ref либо id html-тега.
Свойство virtual позволяет виртуализировать выпадающий список. Для настройки высоты списка можно использовать свойство listMaxHeight.
Примечание: работает только при количестве отфильтрованных suggestions > 10, в противном случае виртуализация выключается автоматически.
Пропс renderItem для кастомной настройки элемента в выпадающем списке. Принимает коллбэк с одним параметром: item.
В примере использован другой наш компонент - Cell.
Клавиатурная навигация
Данный компонент соответствует требованиям W3C: Combobox.
Tab, Escape- закрывает автокомплит. Перемещает фокус на следующий элемент на странице;Enter- выбираем подсказку из списка;Home- перемещает фокус на первый элемент;End- перемещает фокус на последний элемент;ArrowUp- перемещает фокус на один элемент выше;ArrowDown- перемещает фокус на один элемент ниже;