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