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>.

Примеры​

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 только когда это необходимо. Оно влияет на выходной тип в onChange.

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

Live Editor
Result
Open in CodeSandbox

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

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