Combobox
Использование
Обязательным параметром является только items
. Внутри items может быть такой же вложенный массив items. Формат следующий:
type Items = Array<{
/**
* Значение у item
*/
value: string;
/**
* Метка-подпись к item
*/
label: string;
/**
* Сторона открытия вложенного дропдауна относительно текущего элемента;
* @default right
*/
placement?: Placement;
/**
* Список дочерних items.
*/
items?: Array<ItemOption>;
/**
* Item не активен
*/
disabled?: boolean;
/**
* Слот для контента слева
*/
contentLeft?: ReactNode;
/**
* Слот для контента справа
*/
contentRight?: ReactNode;
}>;
Тип выбора комбобокса - одиночный или множественный зависит от типа value
и onChange
. В одиночном value - string
, в множественном - Array<string>
.\
Примеры
- Single
- Multiple
- Predefined
- Portal
- Uncontrolled
- Always opened
- Virtual
- Infinite Loading
Есть возможность задать значения по дефолту (главное, чтобы они находились в items
). Также можно управлять состоянием снаружи селекта.
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.
Для такой реализации имеется пропс portal
, который принимает либо ref
либо id
html-тега.
Также нужно прокинуть проп listWidth
, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
value
и onChange
- опциональные параметры. Если вы хотите uncontrolled
вариант компонента - их пробрасывать необязательно.
Свойство alwaysOpened позволяет отображать Combobox всегда открытым. При этом closeAfterSelect игнорируется.
Свойство virtual
позволяет виртуализировать выпадающий список. Для настройки высоты списка можно использовать свойство listMaxHeight
.
Работает только в одноуровневых списках.
Пример с бесконечной загрузкой элементов в списке.
Использование с React Hook Form и нативной формой
name
Используйте свойство name
только когда это необходимо. Оно влияет на выходной тип в onChange
.
- Default
- Controller
- Native Form
Работа с react-hook-form
через register
.
Работа с react-hook-form
через controller
.
Работа с нативной формой.
Клавиатурная навигация
Данный компонент соответствует требования W3C: Combobox и частично TreeView.