Clear Button

Clear Button в Tom Select реализуется через встроенный плагин clear_button, который добавляет в интерфейс компонента интерактивную кнопку сброса выбранных значений. Этот механизм работает поверх базовой архитектуры селекта и взаимодействует с внутренним состоянием выбранных элементов, не нарушая модель данных и не требуя внешнего управления состоянием.

Активация функциональности выполняется через систему плагинов:

new TomSelect('#select', {
  plugins: ['clear_button']
});

При подключении плагина библиотека расширяет DOM-контейнер селекта дополнительным элементом управления. Кнопка интегрируется в область control и визуально связывается с текущим состоянием выбора.

Важной особенностью является то, что плагин не изменяет поведение ядра компонента, а лишь подписывается на события изменения состояния и добавляет дополнительный триггер для очистки.

Механизм работы очистки состояния

Логика очистки в плагине clear_button опирается на внутренние методы экземпляра:

  • clear() — основной метод сброса значений
  • setValue(null) или setValue([]) — альтернативные формы очистки в зависимости от режима
  • clearOptions() не используется для удаления выбранных значений, так как относится к списку опций

При активации кнопки происходит вызов внутреннего метода очистки, который:

  1. Сбрасывает текущие выбранные значения
  2. Обновляет состояние UI
  3. Триггерит события изменения
  4. Перерисовывает элементы control и dropdown при необходимости

Поведение в single и multiple режимах

Clear Button ведёт себя по-разному в зависимости от конфигурации селекта.

В режиме single select очищается единственное выбранное значение, после чего компонент возвращается в состояние пустого выбора.

new TomSelect('#select', {
  plugins: ['clear_button'],
  maxItems: 1
});

В этом режиме после очистки input становится пустым, а placeholder снова отображается.

В режиме multiple select очистка затрагивает массив выбранных значений:

new TomSelect('#select', {
  plugins: ['clear_button'],
  maxItems: null
});

После вызова очистки массив значений устанавливается в пустое состояние, а все выбранные теги удаляются из DOM.

Условия отображения кнопки

Плагин clear_button не всегда отображает элемент управления. Отрисовка зависит от состояния компонента:

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

Это поведение реализуется через наблюдение за событиями изменения (change, item_add, item_remove).

Интеграция с событиями жизненного цикла

Clear Button тесно связан с системой событий экземпляра.

Ключевые события:

  • onChange — обновление состояния после очистки
  • onItemRemove — вызывается при удалении отдельных элементов
  • onInitialize — используется для первичной синхронизации кнопки
  • onDropdownOpen и onDropdownClose — могут влиять на визуальное состояние кнопки в некоторых реализациях UI

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

Взаимодействие с create и persist

При использовании опций create и persist поведение очистки приобретает дополнительные особенности.

new TomSelect('#select', {
  plugins: ['clear_button'],
  create: true,
  persist: false
});

Если включено создание новых опций, очистка не удаляет сами опции из списка доступных значений. Она затрагивает только выбранные элементы. При этом созданные пользователем значения остаются в dataset, если persist активирован.

Программная эмуляция нажатия clear button

Поскольку кнопка является лишь UI-обёрткой над методом clear, аналогичный эффект достигается напрямую:

const ts = new TomSelect('#select', {
  plugins: ['clear_button']
});

ts.clear();

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

Особенности работы с disabled состоянием

Если компонент находится в состоянии disabled, кнопка очистки:

  • не отображается либо становится неактивной
  • не реагирует на пользовательский ввод
  • не вызывает метод clear()
new TomSelect('#select', {
  plugins: ['clear_button'],
  disabled: true
});

При динамическом переключении setDisabled(true/false) состояние кнопки синхронизируется автоматически через механизм обновления UI.

Стилизация Clear Button

Визуальное представление кнопки формируется через стандартные CSS-классы Tom Select. Обычно используется контейнер control, внутри которого добавляется элемент действия очистки.

Пример типовой структуры:

<div class="ts-wrapper">
  <div class="ts-control">
    <div class="ts-item">Value</div>
    <div class="clear-button"></div>
  </div>
</div>

Стилизация может включать:

  • позиционирование внутри control
  • изменение прозрачности при отсутствии значений
  • hover-эффекты
  • адаптацию под single/multiple режимы

Переопределение внешнего вида выполняется через CSS без изменения логики плагина.

Поведение при асинхронной загрузке опций

При использовании load или динамического источника данных очистка не влияет на процесс загрузки:

new TomSelect('#select', {
  plugins: ['clear_button'],
  load: function(query, callback) {
    fetch('/api/options?q=' + query)
      .then(r => r.json())
      .then(callback);
  }
});

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

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

Если значение селекта изменяется программно извне, кнопка очистки автоматически реагирует на изменения состояния:

ts.setValue(['a', 'b']);
ts.clear();

После выполнения clear() DOM и внутреннее состояние синхронизируются, включая скрытие кнопки при пустом значении и обновление списка элементов.

Ограничения и нюансы реализации

Плагин clear_button имеет ряд поведенческих особенностей:

  • не предназначен для частичного удаления элементов (только полная очистка)
  • не различает источники изменений (UI или API)
  • зависит от корректной работы событийной системы компонента
  • не управляет бизнес-логикой выбора, а только UI-слоем

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

Расширение поведения через кастомный рендер

При необходимости поведение кнопки может быть модифицировано через переопределение рендера control:

new TomSelect('#select', {
  plugins: ['clear_button'],
  render: {
    control: function(data, escape) {
      return `
        <div class="ts-control">
          ${data.items.map(i => `<div class="item">${escape(i)}</div>`).join('')}
          <div class="clear-button-custom"></div>
        </div>
      `;
    }
  }
});

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

Оглавление