Combobox

Использование​

Обязательным параметром является только items. Внутри items может быть такой же вложенный массив items. Формат следующий:

type Items = Array<{
    /**
     * Значение у item.
     */
    value: string;
    /**
     * Метка-подпись к item.
     */
    label: string;
    /**
     * Сторона открытия вложенного дропдауна относительно текущего элемента.
     * @default bottom-start
     */
    placement?: Placement;
    /**
     * Список дочерних items.
     */
    items?: Array<ItemOption>;
    /**
     * Item не активен.
     */
    disabled?: boolean;
    /**
     * Слот для контента слева.
     */
    contentLeft?: ReactNode;
    /**
     * Слот для контента справа.
     */
    contentRight?: ReactNode;
    /**
     * Classname для item.
     */
    className?: string;
    /**
     * Максимальная высота дочернего выпадающего списка.
     */
    listMaxHeight?: CSSProperties['height'];
}>;

Тип выбора задается свойством multiple. В одиночном режиме value и defaultValue имеют тип string, в множественном - string[].

В одиночном режиме можно использовать mode="radio", если нужно запретить снятие выбора повторным кликом. В множественном режиме доступны selectAllOptions, isTargetAmount, targetAmount, renderValue и chipClickArea.

Appearance​

appearance="viewMode" — режим просмотра.

Live Editor
Result
Open in CodeSandbox

Примеры​

Live Editor
Result
Open in CodeSandbox

Взаимодействие с disabled-элементами​

Изнутри компонента взаимодействие с disabled-элементами невозможно. Ниже представлены примеры с selected и unselected disabled-элементом.

Live Editor
Result
Open in CodeSandbox

TreeView и подсветка найденных элементов​

Данный пример показывает реализацию подсветки (highlighting) символов в найденных элементах в режиме treeView.

Live Editor
Result
Open in CodeSandbox

Использование с React Hook Form и нативной формой​

Использование атрибута name

Используйте свойство name только когда это необходимо. Если value не передан, компонент работает в native-режиме и onChange получает native-like event. В controlled-режиме name не меняет контракт onChange: он вызывается как (value, item).

Работа с react-hook-form через register.

Live Editor
Result
Open in CodeSandbox

Клавиатурная навигация​

Данный компонент соответствует требования W3C: Combobox и частично TreeView.

API​