Метод close

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

Поведение метода связано исключительно с UI-слоем: он не изменяет выбранные значения, не влияет на данные и не выполняет перерасчёт состояния опций. Его задача — контролировать видимость dropdown-меню.

Сигнатура и базовое использование

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

select.close()

Где select — экземпляр инициализированного компонента.

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

При вызове close происходит:

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

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

Закрытие списка в различных режимах

Обычный select (single)

В однострочном режиме close просто скрывает список и возвращает компонент в исходное состояние.

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

select.close()

Multi-select режим

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

const select = new SlimSelect({
  select: '#multi',
  multiple: true
})

select.close()

Режим поиска

Если открыт поиск, close дополнительно:

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

Отличие от других методов управления UI

open vs close

  • open — принудительно отображает список
  • close — скрывает список

Оба метода не влияют на выбранные значения.

destroy vs close

close:

  • временное действие;
  • компонент остаётся активным;
  • можно снова открыть dropdown.

destroy:

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

Взаимодействие с событиями

В Slim Select состояние открытия/закрытия связано с внутренними событиями интерфейса.

При вызове close могут срабатывать следующие сценарии:

  • обработчики blur на input поиска;
  • кастомные listeners, завязанные на закрытие dropdown;
  • логика внешних контроллеров UI.

Пример отслеживания состояния через события:

const select = new SlimSelect({
  select: '#example',
  events: {
    afterClose: () => {
      console.log('dropdown закрыт')
    }
  }
})

Закрытие по пользовательским действиям

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

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

const select = new SlimSelect({
  select: '#example',
  events: {
    afterChange: () => {
      select.close()
    }
  }
})

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

Закрытие при клике вне компонента

В стандартной логике Slim Select dropdown закрывается автоматически при клике вне области компонента, однако программный close позволяет расширить это поведение:

document.addEventListener('scroll', () => {
  select.close()
})

Особенности состояния фокуса

При вызове close:

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

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

Использование в динамических интерфейсах

В интерфейсах с динамической загрузкой данных метод применяется для контроля UX:

После обновления данных

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

В модальных окнах

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

modal.onCl ose = () => {
  select.close()
}

Поведение при повторном вызове

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

  • повторный вызов close() при уже закрытом списке не вызывает ошибок;
  • состояние экземпляра не изменяется;
  • DOM не перестраивается.
select.close()
select.close() // безопасно

Ограничения метода

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

  • изменение выбранных значений;
  • сброс фильтра поиска;
  • уничтожение DOM-структуры;
  • управление состоянием disabled.

Он работает исключительно с визуальным состоянием dropdown.

Взаимодействие с клавиатурой

При использовании клавиши Escape стандартное поведение часто эквивалентно вызову close. Однако программный метод позволяет:

  • закрывать список вне контекста фокуса;
  • синхронизировать UI с внешними состояниями приложения;
  • управлять компонентом из сторонних контроллеров.

Практика использования в сложных сценариях

Синхронизация с роутингом

window.addEventListener('popstate', () => {
  select.close()
})

Закрытие при изменении layout

const observer = new ResizeObserver(() => {
  select.close()
})

observer.observe(document.body)

Интеграция с кастомными dropdown-менеджерами

В системах с несколькими выпадающими компонентами close используется для предотвращения наложения интерфейсов:

function closeAllDropdowns() {
  select1.close()
  select2.close()
  select3.close()
}

Состояние после вызова

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

  • dropdown скрыт;
  • внутренний флаг открытия сброшен;
  • компонент готов к повторному открытию;
  • выбранные значения остаются неизменными;
  • данные остаются синхронизированными с DOM.
Оглавление