Инспекция состояния

Tom Select опирается на согласованную модель состояния, объединяющую набор выбранных значений, список доступных опций, активные элементы интерфейса и текущее состояние выпадающего списка. Инспекция состояния в рамках библиотеки позволяет анализировать поведение компонента в реальном времени, диагностировать рассинхронизацию данных и управлять жизненным циклом выбора без обращения к DOM напрямую.

Базовые сущности состояния

Внутреннее состояние Tom Select можно условно разделить на несколько ключевых блоков:

  • items — массив выбранных значений
  • options — словарь всех доступных опций
  • currentResults — текущий набор отображаемых результатов после фильтрации
  • activeItems — элементы, находящиеся в фокусе или выделенные в UI
  • open — флаг состояния раскрытия dropdown
  • control — ссылка на основной input-элемент управления
  • dropdown — контейнер выпадающего списка

Каждая из этих сущностей синхронизируется с внутренним состоянием инстанса и может быть получена или косвенно выведена через API.

Получение выбранных значений

Основной точкой инспекции является массив выбранных значений:

select.items

Он содержит идентификаторы (или значения), которые были выбраны пользователем или установлены программно. Этот массив является источником истины для состояния выбора.

Синхронно с ним работает метод:

select.getValue()

Он возвращает строку или массив значений (в зависимости от конфигурации multiple), нормализованный для внешнего использования.

Ключевая особенность:

  • items — внутренний формат
  • getValue() — внешний формат

Анализ доступных опций

Список всех опций хранится в объекте:

select.options

Структура представляет собой словарь:

{
  "value1": { value: "value1", text: "Label 1" },
  "value2": { value: "value2", text: "Label 2" }
}

Инспекция options используется для:

  • проверки корректности загрузки данных
  • диагностики асинхронных источников
  • контроля кастомных рендеров

Дополнительно применяется метод:

select.refreshOptions()

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

Состояние dropdown и его жизненный цикл

Состояние выпадающего списка определяется флагом:

select.isOpen

и управляется методами:

select.open()
select.close()

При инспекции важно учитывать не только флаг, но и DOM-состояние:

  • наличие класса dropdown-active
  • присутствие узла select.dropdown
  • синхронизацию позиции и размеров

Несоответствие между isOpen и фактическим DOM часто указывает на неконсистентность UI после кастомных манипуляций.

Контрольный input и его состояние

Основной элемент управления доступен через:

select.control

Он представляет собой input или contenteditable-узел, в зависимости от конфигурации.

Инспекция включает проверку:

  • текущего значения input
  • состояния фокуса
  • доступности (disabled, readonly)
  • связанного placeholder

Пример анализа:

select.control.value
select.control.disabled
select.control.readOnly

Эти свойства влияют на поведение фильтрации и доступность ввода.

Выделенные и активные элементы

Tom Select поддерживает концепцию активного элемента внутри списка результатов:

  • навигация с клавиатуры
  • hover-состояние
  • программное выделение

Состояние можно косвенно определить через DOM:

  • класс active
  • атрибут data-selectable
  • индекс активного результата

Хотя явного публичного API для active item может не быть, состояние можно отслеживать через:

select.dropdown.querySelector('.active')

Инспекция фильтрации и текущих результатов

После ввода текста формируется набор:

select.currentResults

Он зависит от:

  • текущего значения input
  • функции score() или кастомного search
  • параметров sortField

Инспекция currentResults позволяет определить:

  • какие элементы скрыты фильтром
  • как работает сортировка
  • корректность кастомных search-функций

Синхронизация состояния и внешние изменения

Tom Select реагирует на изменения через ряд методов:

select.addItem(value)
select.removeItem(value)
select.setValue(values)
select.clear()

Инспекция после вызова этих методов включает проверку согласованности:

  • items должен совпадать с UI
  • options должен содержать все выбранные значения
  • DOM должен отражать актуальные selected nodes

Особенно важно учитывать setValue(), так как он может вызывать полную пересборку состояния:

select.setValue(["a", "b"], true)

Флаг silent влияет на генерацию событий и может скрывать промежуточные состояния.

Событийная модель как источник состояния

Состояние также может быть реконструировано через события:

  • change
  • item_add
  • item_remove
  • dropdown_open
  • dropdown_close
  • type

Каждое событие содержит информацию, полезную для инспекции:

select.on('item_add', (value) => {
  // текущее состояние items уже обновлено
})

События позволяют отследить временную эволюцию состояния и выявить гонки обновлений.

Состояние поиска и ввода

Поле ввода формирует отдельный слой состояния:

select.lastQuery
select.inputValue

Оно влияет на:

  • фильтрацию options
  • отображение dropdown
  • состояние empty results

Инспекция этого слоя важна при кастомных поисковых алгоритмах и асинхронной загрузке данных.

Режимы блокировки и ограничения

Состояние компонента может быть изменено через:

select.disable()
select.enable()

или через свойства:

select.isDisabled

При инспекции учитываются:

  • блокировка ввода
  • невозможность открытия dropdown
  • игнорирование событий выбора

Также важно учитывать взаимодействие disabled с уже выбранными items: они остаются в состоянии, но становятся не редактируемыми.

Целостность состояния и диагностика

Инспекция состояния в сложных сценариях включает проверку согласованности:

  • items ⟷ DOM selected nodes
  • options ⟷ rendered dropdown items
  • currentResults ⟷ фильтрованный список
  • control.value ⟷ отображаемый текст
  • isOpen ⟷ состояние dropdown

Типовые расхождения возникают при:

  • асинхронной загрузке данных
  • ручном вмешательстве в DOM
  • кастомных рендерах
  • неправильном использовании setValue

Внутренние ссылки и доступ к инстансу

Доступ к полному состоянию возможен через объект инстанса:

const select = new TomSelect("#select");

Все ключевые поля становятся доступны как свойства объекта, включая приватные поля, начинающиеся с _, которые отражают внутреннюю машину состояния:

  • _activeItems
  • _renderCache
  • _dropdown
  • _controlInput

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

Отладочная модель состояния

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

  • узел выбора (items)
  • узел источника (options)
  • узел представления (DOM)
  • узел взаимодействия (events)

Любое несоответствие между этими слоями указывает на нарушение синхронизации, которое проявляется в UI-дефектах: дублировании значений, исчезновении опций, невозможности удалить элементы или некорректной фильтрации.

Оглавление