Событие showDropdown и hideDropdown

Choices.js реализует систему событий, ориентированную на управление жизненным циклом выпадающего списка, и два ключевых события, связанных с отображением интерфейса выбора, — showDropdown и hideDropdown — относятся к уровню управления визуальным состоянием компонента. Эти события возникают в момент открытия и закрытия выпадающего списка и позволяют синхронизировать внешний код с внутренними изменениями состояния компонента.

Событие showDropdown срабатывает в момент, когда выпадающий список становится видимым для пользователя. Это не просто визуальный эффект, а переход компонента в активное состояние взаимодействия.

Поведение события

При вызове внутреннего метода открытия списка библиотека:

  • изменяет состояние контейнера на «открытое»
  • рассчитывает позиционирование dropdown-элемента
  • выполняет фильтрацию элементов (если включён поиск)
  • отображает список вариантов

После завершения этих операций диспатчится событие showDropdown.

Подключение обработчика

Событие доступно через стандартный механизм событий экземпляра Choices:

const element = document.querySelector('.js-choice');

const choices = new Choices(element);

choices.passedElement.element.addEventListener(
  'showDropdown',
  function () {
    console.log('Dropdown открыт');
  },
  false
);

Практическое применение

Событие используется для управления интерфейсом и интеграции с внешними системами:

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

Пример блокировки прокрутки:

choices.passedElement.element.addEventListener('showDropdown', () => {
  document.body.style.overflow = 'hidden';
});

Особенности поведения

showDropdown может вызываться:

  • при клике на поле выбора
  • при фокусе с включённым автозакрытием
  • при программном вызове открытия списка

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

hideDropdown: момент закрытия списка

Событие hideDropdown возникает при закрытии выпадающего списка. Оно является зеркальным по отношению к showDropdown и фиксирует момент возврата компонента в неактивное состояние.

Когда срабатывает событие

Закрытие списка происходит в нескольких сценариях:

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

После завершения внутренних операций очистки и обновления интерфейса генерируется hideDropdown.

Подключение обработчика

const element = document.querySelector('.js-choice');

const choices = new Choices(element);

choices.passedElement.element.addEventListener(
  'hideDropdown',
  function () {
    console.log('Dropdown закрыт');
  },
  false
);

Типичные сценарии использования

Событие hideDropdown применяется для синхронизации внешнего состояния приложения:

  • восстановление прокрутки страницы
  • очистка временных данных фильтрации
  • завершение UI-анимаций
  • сохранение состояния выбора
  • отправка событий в аналитику

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

choices.passedElement.element.addEventListener('hideDropdown', () => {
  document.body.style.overflow = '';
});

Взаимосвязь с выбором элементов

Важно учитывать, что hideDropdown может вызываться как следствие выбора значения, однако само событие выбора (addItem) и событие закрытия списка не являются идентичными по смыслу.

  • addItem фиксирует изменение данных
  • hideDropdown фиксирует изменение визуального состояния

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

Последовательность событий в жизненном цикле dropdown

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

  1. Пользователь активирует поле выбора
  2. Срабатывает showDropdown
  3. Отображается список вариантов
  4. Пользователь выбирает элемент или закрывает список
  5. Срабатывает hideDropdown

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

Особенности программного управления

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

choices.showDropdown();
choices.hideDropdown();

При таких вызовах:

  • showDropdown срабатывает после завершения рендера списка
  • hideDropdown срабатывает после очистки DOM-состояния dropdown

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

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

В приложениях с большим количеством интерактивных компонентов эти события часто применяются для координации поведения нескольких слоёв интерфейса:

  • управление модальными окнами и z-index слоями
  • синхронизация нескольких dropdown-компонентов
  • управление затемнением фона
  • интеграция с кастомными UI-фреймворками

Пример закрытия других dropdown при открытии текущего:

choices.passedElement.element.addEventListener('showDropdown', () => {
  document.querySelectorAll('.js-choice').forEach((el) => {
    if (el !== choices.passedElement.element) {
      el.choices.hideDropdown();
    }
  });
});

Влияние состояния поиска

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

Это означает:

  • строка поиска может сбрасываться при закрытии
  • результаты фильтрации пересоздаются при открытии
  • DOM-список может динамически изменяться между событиями

Поведенческие нюансы и синхронизация

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

  • возможна отложенная отрисовка dropdown
  • порядок событий сохраняется строго: showDropdown → hideDropdown
  • внешняя логика должна учитывать асинхронность UI-операций

Для стабилизации состояния часто используют флаги:

let isOpen = false;

choices.passedElement.element.addEventListener('showDropdown', () => {
  isOpen = true;
});

choices.passedElement.element.addEventListener('hideDropdown', () => {
  isOpen = false;
});

Взаимодействие с кастомной стилизацией

CSS-логика часто строится вокруг состояния dropdown, которое косвенно отражается через эти события:

  • добавление классов анимации при showDropdown
  • удаление классов при hideDropdown
  • управление transition-эффектами

Пример:

choices.passedElement.element.addEventListener('showDropdown', (event) => {
  event.target.classList.add('is-open');
});

choices.passedElement.element.addEventListener('hideDropdown', (event) => {
  event.target.classList.remove('is-open');
});

Роль событий в архитектуре компонента

showDropdown и hideDropdown формируют фундаментальный слой реактивности компонента. Они отделяют:

  • визуальное состояние (открыт/закрыт)
  • данные выбора (items, selection)
  • пользовательские действия (input, click, keydown)

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

Оглавление