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