Параметр hideSelectedOption

Параметр allowDeselectOption в библиотеке Slim Select управляет возможностью снятия уже выбранного значения в одноколоночных (single select) и многоколоночных (multiple select) списках. Его поведение напрямую влияет на логику взаимодействия пользователя с выбранными элементами и определяет, допускается ли возврат к состоянию «без выбранного значения» после выбора опции.

Базовое назначение и поведение

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

Параметр allowDeselectOption изменяет это поведение:

  • при значении false выбранная опция не может быть снята кликом по ней повторно;
  • при значении true активируется возможность «переключения» выбранного значения в состояние пустого выбора.

Ключевая особенность заключается в том, что параметр влияет именно на интерактивное поведение, а не на структуру данных или DOM-элементы напрямую.

Синтаксис использования

Настройка задаётся при инициализации экземпляра Slim Select:

new SlimSelect({
  select: '#example-select',
  allowDeselectOption: true
});

или

new SlimSelect({
  select: '#example-select',
  allowDeselectOption: false
});

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

Поведение в режиме single select

В режиме одиночного выбора allowDeselectOption оказывает наиболее заметное влияние.

allowDeselectOption: false

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

Логика поведения соответствует стандартному HTML <select> без multiple.

allowDeselectOption: true

  • выбранная опция может быть сброшена повторным взаимодействием;
  • после снятия выбора компонент переходит в состояние null или пустого значения;
  • интерфейс допускает состояние «не выбрано».

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

Поведение в режиме multiple select

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

Однако allowDeselectOption может влиять на:

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

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

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

Влияние на состояние данных

Slim Select хранит внутреннее состояние выбранных значений, синхронизируя его с оригинальным <select> элементом. При включённом allowDeselectOption возможны следующие изменения состояния:

  • value: string | null для single select;
  • value: [] (пустой массив) для multiple select.

При выключенном параметре:

  • для single select значение всегда остаётся строкой (если задано начальное значение);
  • для multiple select может поддерживаться ограничение на пустое состояние в зависимости от дополнительных настроек.

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

Параметр тесно связан с отображением placeholder-значений.

При allowDeselectOption: true:

  • после снятия выбора активируется отображение placeholder;
  • компонент визуально возвращается в исходное состояние.

При allowDeselectOption: false:

  • placeholder используется только до первого выбора;
  • после выбора он перестаёт отображаться, пока не будет выбрана другая опция.

Сценарии применения

Фильтры и поисковые формы

В интерфейсах фильтрации товаров или данных возможность сброса выбора часто критична. allowDeselectOption: true позволяет реализовать сценарий:

  • выбор категории;
  • повторный клик для снятия фильтра;
  • возврат к «всем значениям».

Формы с обязательными полями

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

  • предотвращается пустое состояние;
  • упрощается валидация формы;
  • исключаются неконсистентные данные.

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

Изменение состояния выбора при включённом allowDeselectOption вызывает стандартные события Slim Select:

  • onChange — при выборе новой опции;
  • onClear (в некоторых реализациях) — при очистке выбора.

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

Пример логики:

new SlimSelect({
  select: '#example-select',
  allowDeselectOption: true,
  onChange: (info) => {
    // info может быть объектом или null
  }
});

Особое внимание требуется при обработке null-состояния, так как оно становится валидным результатом пользовательского действия.

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

В интерфейсе Slim Select влияние параметра проявляется через:

  • возможность повторного клика по активному элементу;
  • визуальное снятие выделения;
  • изменение состояния чек-марка (в single select);
  • возврат placeholder-текста.

При отключённой возможности снятия выбора UI ведёт себя более «строго» — выбранное состояние всегда фиксировано.

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

  • Параметр не влияет на программное изменение значения через API (set() или аналогичные методы).
  • Не изменяет HTML-структуру <select>.
  • Может конфликтовать с логикой кастомных обработчиков кликов, если они принудительно задают значение.
  • В некоторых версиях Slim Select поведение может отличаться между single и multiple режимами.

Комбинация с другими параметрами

allowDeselectOption часто используется совместно с:

  • placeholder — для отображения состояния пустого выбора;
  • closeOnSelect — влияет на UX после выбора/снятия;
  • allowDeselect (если присутствует в расширенных конфигурациях) — для управления тегами в multiple select.

Комбинация этих параметров формирует итоговую модель взаимодействия:

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

Поведенческая модель

Логика работы параметра может быть представлена как состояние конечного автомата:

  • состояние A: нет выбранного значения;
  • состояние B: выбран один элемент;
  • переход A → B: выбор опции;
  • переход B → B: смена выбора;
  • переход B → A: снятие выбора (только при allowDeselectOption: true).

При false переход B → A блокируется, что фиксирует систему в двух состояниях без возможности возврата к пустому.

Практическая значимость

Наличие allowDeselectOption позволяет адаптировать Slim Select под разные модели интерфейсов:

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

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

Оглавление