Select

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

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

type Items = Array<{
        /**
         *  Значение у item
         */
        value: string;
        /**
         * Метка-подпись к item
         */
        label: string;
        /**
        * Сторона открытия вложенного дропдауна относительно текущего элемента;
        */
        placement: SelectPlacement | Array<SelectPlacementBasic>;
        /**
         * Список дочерних items.
         */
        items?: Array<ItemOption>;
        /**
         * Item не активен
         */
        disabled?: boolean;
        /**
         * Слот для контента слева
         */
        contentLeft?: ReactNode;
        /**
         * Слот для контента справа
         */
        contentRight?: ReactNode;
        /**
         * Выбранный item.
         * @deprecated
         */
        isActive?: boolean;
        /**
         * Кастомный цвет текста
         * @deprecated
         */
        color?: string;
        /**
         * Айтем не активен
         * @deprecated использовать disabled
         */
        isDisabled?: boolean;
    }>;

Тип выбора селекта - одиночный или множественный зависит от типа value и onChange. В одиночном value - string, в множественном - Array<string>. Select может выглядеть как Button и как Textfield. За это отвечает пропс - target.
Есть возможность прокидывать компонент EmptyState в пропс renderList для изменения содержимого выпадающего окна.
Это нужно в случаях, когда произошла ошибка при загрузке items, либо когда items пустой. Более подробно в примерах.

Примеры​

В режиме textfield доступны только следующие варианты view: default, warning, positive и negative.

Live Editor
Result
Open in CodeSandbox

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

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

Live Editor
Result
Open in CodeSandbox

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

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

Используйте свойство name только когда это необходимо. Оно влияет на выходной тип в onChange.

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

Live Editor
Result
Open in CodeSandbox

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

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

  • Tab - закрывает дропдаун. Перемещает фокус на следующий элемент на странице;
  • Enter - открывает/закрывает дропдаун. Если на элементе - выбирает его. Если у элемента есть дочерний дропдаун - открывает его, выбор элемента не происходит;
  • Space - открывает/закрывает дропдаун. Если на элементе - выбирает его и все дочерние элементы.
  • Home - открывает дропдаун и перемещает фокус на первый элемент;
  • End - открывает дропдаун и перемещает фокус на последний элемент;
  • PageUp - перемещает фокус на 10 элементов выше либо в начало списка;
  • PageDown - перемещает фокус на 10 элементов ниже либо в конце списка;
  • ArrowUp - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
  • ArrowDown - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
  • ArrowRight - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент; Если фокус на таргете - переходит в режим выбора чипа.
  • ArrowLeft - закрывает текущий список и перемещает фокус на предыдущий; Если фокус на таргете - переходит в режим выбора чипа.
  • Backspace - только если фокус на чипе - снимает выбор с текущего значения;