Метод enable

Метод enable в библиотеке Slim Select используется для включения ранее отключённого экземпляра выпадающего списка. Он восстанавливает интерактивность компонента, позволяя пользователю снова взаимодействовать с элементами выбора, открывать список, искать значения и изменять текущую выборку.

В контексте Slim Select состояние «отключено» означает блокировку всех пользовательских действий: клик по полю игнорируется, поиск недоступен, выбор и снятие выбора невозможны. Метод enable возвращает компонент в активное состояние без необходимости пересоздания экземпляра.

Общая логика работы enable

Внутренне Slim Select управляет состоянием через флаг активности. При вызове enable выполняется:

  • снятие CSS-классов, отвечающих за неактивное состояние
  • восстановление обработчиков событий
  • включение доступности элементов управления
  • обновление состояния DOM

Метод не изменяет данные (data) и не сбрасывает выбранные значения. Он влияет исключительно на интерактивность.

Синтаксис

select.enable()

Метод вызывается на экземпляре Slim Select, созданном ранее.

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

const select = new SlimSelect({
  select: '#mySelect'
})

Включение компонента после отключения:

select.enable()

Поведение метода enable

После вызова enable компонент переходит в активное состояние:

  • раскрытие списка снова доступно
  • поле поиска становится активным (если включено)
  • выбор опций восстанавливается
  • клавиатурная навигация снова работает
  • визуальные индикаторы состояния обновляются

Если компонент уже активен, повторный вызов enable не приводит к ошибкам и не вызывает дополнительных изменений состояния.

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

Методы enable и disable образуют парную систему управления состоянием компонента.

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

select.disable()
// компонент становится неактивным

select.enable()
// компонент снова активен

После вызова disable Slim Select сохраняет внутреннее состояние выбора, а enable возвращает только возможность взаимодействия.

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

Метод enable не влияет на:

  • текущие выбранные значения
  • порядок выбранных элементов (в multi-select)
  • данные в оригинальном <select>

Например:

const select = new SlimSelect({
  select: '#mySelect'
})

select.setSelected('value1')

select.disable()
select.enable()

После включения:

  • value1 остаётся выбранным
  • UI обновляется корректно
  • выбор можно изменить

Enable и режим multiple

В режиме множественного выбора (multiple: true) метод enable восстанавливает:

  • возможность добавления новых тегов
  • удаление выбранных элементов
  • взаимодействие с поисковой строкой
  • drag/drop (если используется кастомная логика)

Пример:

const select = new SlimSelect({
  select: '#multiSelect',
  settings: { allowDeselect: true }
})

select.disable()
select.enable()

Список выбранных элементов остаётся неизменным.

Enable и динамическое обновление данных

При использовании методов setData или addOption поведение enable не зависит от структуры данных.

Пример сценария:

select.setData([
  { text: 'Option 1', value: '1' },
  { text: 'Option 2', value: '2' }
])

select.disable()

select.addOption({ text: 'Option 3', value: '3' })

select.enable()

После включения:

  • все добавленные элементы становятся доступны
  • UI пересчитывается с учётом обновлённого списка

Поведение CSS-состояний

Slim Select использует внутренние классы для обозначения состояния disabled. При вызове enable:

  • удаляются классы неактивного состояния
  • добавляются классы активного состояния
  • восстанавливается стандартный hover/focus стиль

Обычно это затрагивает:

  • контейнер селекта
  • поле ввода (если есть search)
  • кнопки очистки и раскрытия

Keyboard interaction после enable

После включения восстанавливаются стандартные клавиатурные действия:

  • Arrow Down — открытие списка или навигация вниз
  • Arrow Up — навигация вверх
  • Enter — выбор элемента
  • Escape — закрытие списка
  • Backspace — удаление последнего выбранного элемента (в multi режиме)

До вызова enable эти события блокируются.

Поведение в асинхронных сценариях

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

const select = new SlimSelect({
  select: '#asyncSelect'
})

select.disable()

fetch('/api/options')
  .then(res => res.json())
  .then(data => {
    select.setData(data)
    select.enable()
  })

В этом сценарии компонент предотвращает взаимодействие до полной готовности данных.

Повторные вызовы enable

Метод является идемпотентным:

select.enable()
select.enable()
select.enable()

Повторные вызовы:

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

Slim Select проверяет текущее состояние перед применением изменений.

Взаимодействие с form submit

Если селект находится внутри формы:

  • disable может блокировать отправку значения (в зависимости от реализации формы)
  • enable восстанавливает стандартное поведение input/select

После вызова enable значение снова участвует в сериализации формы.

Edge cases

Вызов enable до инициализации

const select = null
select.enable()

Вызовет ошибку, так как метод доступен только экземпляру Slim Select.

Вызов после destroy

Если экземпляр был уничтожен через destroy, метод enable становится недоступным, так как DOM-структура возвращена в исходное состояние.

Enable при скрытом элементе

Если оригинальный <select> скрыт через CSS (display: none), метод всё равно корректно восстанавливает интерактивность Slim Select UI, так как работает с обёрткой компонента.

Использование в сложных интерфейсах

В интерфейсах с зависимыми селектами (cascading selects) enable часто применяется для управления цепочкой:

countrySelect.onChange(() => {
  citySelect.disable()

  loadCities().then(cities => {
    citySelect.setData(cities)
    citySelect.enable()
  })
})

Такой подход предотвращает выбор города до загрузки актуального списка.

Связь enable с состоянием disabled HTML

Slim Select синхронизирует своё состояние с нативным <select disabled>:

  • если disabled = true, компонент блокируется
  • enable может переопределить состояние только на уровне Slim Select UI
  • в зависимости от конфигурации оригинальный disabled атрибут может оставаться

Это важно учитывать при смешанном управлении DOM и Slim Select API.

Производительность

Метод enable относится к лёгким операциям:

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

Изменения ограничены переключением состояния и восстановлением событий.

Оглавление