Опции поведения

Опция create управляет возможностью добавления новых значений, отсутствующих в исходном наборе данных. Включение этого режима переводит компонент в гибридный режим между выпадающим списком и полем ввода, где пользовательские значения становятся полноценными элементами модели данных.

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

Ключевое поведение:

  • расширение списка данных на стороне клиента;
  • динамическое формирование новых опций;
  • сохранение созданных элементов в текущем состоянии компонента.

В связке с persist определяется, сохраняется ли созданное значение при повторной инициализации данных.

Фильтрация и создание (createFilter)

createFilter задаёт правило, по которому вводимый текст считается допустимым для создания нового элемента. Это не просто фильтрация совпадений, а механизм валидации пользовательского ввода.

Фильтр может быть:

  • строкой (например, регулярное выражение);
  • функцией (input) => boolean.

Типичная логика:

  • исключение пустых строк;
  • запрет спецсимволов;
  • ограничение длины;
  • проверка на дубликаты.

Поведение определяется до момента создания, поэтому именно createFilter формирует границу между допустимыми и недопустимыми пользовательскими значениями.

Автосоздание при потере фокуса (createOnBlur)

Опция createOnBlur определяет, будет ли новое значение автоматически создано при уходе фокуса из поля ввода.

Основные сценарии:

  • пользователь ввёл текст и кликнул вне компонента;
  • произошло переключение через клавиатуру;
  • dropdown закрывается без явного подтверждения.

Если create включён, а createOnBlur активирован, система пытается интерпретировать текущий ввод как новый элемент и добавить его в список.

Поведение особенно важно в формах, где требуется минимизация количества действий пользователя при вводе произвольных значений.

Фокус как триггер открытия (openOnFocus)

openOnFocus управляет автоматическим открытием выпадающего списка при получении фокуса.

При true список раскрывается сразу после:

  • клика по полю;
  • программного вызова .focus();
  • перехода по Tab.

При false открытие происходит только через ввод или явное взаимодействие.

Это влияет на UX в двух направлениях:

  • агрессивное поведение интерфейса (быстрый доступ к данным);
  • более спокойное поведение (без автоматических всплытий).

Закрытие после выбора (closeAfterSelect)

Опция closeAfterSelect определяет, закрывается ли dropdown после выбора элемента.

При true:

  • список закрывается после каждого выбора;
  • фокус остаётся в поле;
  • пользователь вынужден повторно открывать список для следующего выбора.

При false:

  • список остаётся открытым;
  • удобно для множественного выбора;
  • ускоряет массовое добавление значений.

В мультиселектах обычно используется false, в одиночных — true.

Ограничение количества выбранных значений (maxItems)

maxItems задаёт верхнюю границу количества выбранных элементов.

Поведение:

  • 1 — режим одиночного выбора;
  • >1 — мультиселект с ограничением;
  • null — отсутствие ограничений.

При достижении лимита:

  • новые элементы не добавляются;
  • ввод может блокироваться или игнорироваться;
  • пользовательский интерфейс перестаёт отображать доступные для выбора элементы (в зависимости от конфигурации).

Скрытие выбранных элементов (hideSelected)

Опция hideSelected определяет, будут ли уже выбранные элементы отображаться в выпадающем списке.

При true:

  • выбранные элементы исключаются из списка;
  • предотвращается повторное добавление;
  • упрощается визуальная навигация.

При false:

  • все элементы остаются видимыми;
  • система допускает повторное взаимодействие (в зависимости от логики maxItems и duplicates поведения).

Выбор через клавишу Tab (selectOnTab)

selectOnTab управляет поведением клавиши Tab при фокусе внутри компонента.

При включении:

  • Tab подтверждает текущий выделенный элемент;
  • элемент добавляется в выбор;
  • фокус остаётся в компоненте или переходит дальше в зависимости от контекста формы.

При выключении:

  • Tab работает стандартно как навигация по полям формы;
  • выбор возможен только через Enter или клик.

Поведение при потере фокуса (selectOnBlur)

selectOnBlur определяет, будет ли текущий ввод автоматически выбран при уходе из поля.

При true:

  • незавершённый ввод может стать выбранным значением;
  • особенно важно в сочетании с create;
  • снижает вероятность потери введённых данных.

При false:

  • ввод сбрасывается, если не подтверждён;
  • поведение становится строгим и предсказуемым.

Ограничение количества отображаемых вариантов (maxOptions)

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

Механика:

  • ограничивает DOM-рендеринг;
  • ускоряет работу при больших наборах данных;
  • влияет на UX поиска.

Типичные сценарии:

  • большие справочники (страны, города, теги);
  • динамические источники данных;
  • серверная фильтрация.

Исключение выбранных значений из модели (allowEmptyOption)

allowEmptyOption регулирует обработку пустых значений в списке.

При true:

  • пустые значения допускаются;
  • могут использоваться как “сброс” или “не выбрано”.

При false:

  • пустые элементы игнорируются;
  • предотвращается появление некорректных состояний модели.

Сохранение пользовательских значений (persist)

persist определяет, сохраняются ли пользовательски созданные элементы после пересоздания или обновления списка данных.

При true:

  • созданные значения остаются в наборе;
  • повторная загрузка не удаляет их;
  • состояние становится более «живым» и изменяемым.

При false:

  • данные строго соответствуют источнику;
  • пользовательские элементы исчезают при обновлении.

Блокировка взаимодействия (lock)

lock переводит компонент в режим полной недоступности для изменений.

Поведение:

  • блокируется ввод;
  • отключается открытие списка;
  • невозможен выбор или удаление элементов.

Используется для:

  • временной фиксации состояния формы;
  • ожидания серверной операции;
  • предотвращения изменений при валидации.

Управление сортировкой поведения выбора (sortField)

Хотя sortField формально относится к отображению, он напрямую влияет на поведение выбора, определяя порядок элементов в списке и выбранных значениях.

Поддерживаемые режимы:

  • строка — сортировка по полю;
  • объект — сложная сортировка по нескольким критериям;
  • функция — кастомная логика сравнения.

Поведение сортировки влияет на:

  • предсказуемость интерфейса;
  • скорость поиска нужного элемента;
  • стабильность UX при динамических данных.
Оглавление