Combobox

Компонент, отвечающий за выпадающий список с возможностью фильтрации элементов и их выбора. Доступен в двух режимах: единичный и множественный выбор.

Combobox​

Storybook

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

Компонент Combobox должен содержать компоненты из следующего списка: ComboboxDivider, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxItem. Для управления режимом, необходимо установить свойство valueType = 'single' для единичного выбора и valueType='multiple' для множественного. Так же для выбора отобржаения множественого режима свойство enumerationType = 'comma' для перечисления выбранных значений через запятую, и enumerationType = 'chip' для перечисления выбранных значений с помощью компонента Chip.

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

Данный компонент может полностью управляться с помощью клавиатуры, используя следующие клавиши:

  • Tab - переход на таргет (инпут)
  • Shift + tab - выход с него (теряем фокус)
  • Стрелка вверх / стрелка вниз - открыть выпадающий список и переместиться на первый элемент
  • Стрелка вверх / стрелка вниз ходим по элементам с зацикливанием
  • Enter - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на таргет (инпут)
  • Если мы ходим по селекту и нажимаем Tab - выпадающий список закрывается и теряем фокус
  • Если мы ходим по селекту и нажимаем Escape - выпадающий список закрывается и фокусом остаёмся на таргете
  • В мультиселекте тоже самое кроме закрытия выпадающего списка при выборе элемента
  • Когда находимся на первом чипе, нажимаем стрелку влево / стрелку вправо - переходим по чипам
  • Когда оказываемся на последнем чипе и нажимаем стрелку вправо - переходим на таргет (инпут)
  • Когда находимся на таргете (инпуте) и нажимаем Backspace - удаляется последний чип
  • Когда находимся на таргете (инпуте) и нажимаем стрелку влево - переходим на последний чип
  • Нажимаем Backspace - удаляем выбранный чип и переходим на предыдущий
  • Если удалили последний чип, то фокусируемся на таргете
  • Если находимся в выборе элемента из выпадающего списка и нажимаем стрелку влево / стрелку вправо - попадаем на самый последний чип
  • Если находимся в режиме выбора элемента и нажимаем стрелку вниз / стрелку вверх находясь на последнем / первом элементе, то перескакиваем в начало / в конец
  • Если находимся в режиме выбора элемента и нажимаем любую клавишу кроме стрелки вниз / вверх / влево / вправо / Escape / Tab / Enter, то переходим на таргет (инпут) и вводим значения
  • Ввод значение в таргет (инпут) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"

Single​

Live Editor
Result
Open in CodeSandbox

Multiple​

Live Editor
Result
Open in CodeSandbox

Примеры​

Размер Combobx​

Размер Combobx задается с помощью свойства size. Возможные значения свойства: "l", "m", "s" или "xs", а также соответствующие размеры компонент Checkbox и IconDone:

Для иконок верно такое соответствие размеров (Icon = Combobox):

  • xs = xs,
  • s = s,
  • m = s,
  • l = s,

Для Checkbox / Radiobox верно такое соответствие размеров (Checkbox / Radiobox = Combobox):

  • xs = s,
  • s = m,
  • m = m,
  • l = m,
Live Editor
Result
Open in CodeSandbox

Применение пользовательского фильтра​

Combobox поддверживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции колбэка filterFunction, которая срабатывает на каждый элемент и если возвращает true, то элемент рендерится, иначе нет.

Live Editor
Result
Open in CodeSandbox