Checkbox или radiobutton в меню dropdowns

Меню dropdowns в Bootstrap 5 — это удобный способ представления выпадающего списка опций. Однако при добавлении элементов управления, таких как checkbox (флажки) или radiobutton (радиокнопки), возникает проблема: клик по этим элементам приводит к автоматическому закрытию меню. Это происходит из-за встроенного поведения Bootstrap, которое закрывает dropdown после любого клика внутри него. Ниже мы разберем, как исправить эту проблему, чтобы dropdown оставался открытым при взаимодействии с checkbox и radiobutton.

На этой странице

Проблема

Bootstrap 5 автоматически закрывает меню dropdown после события click. По умолчанию это поведение включено для всех элементов внутри меню, даже если они не предназначены для завершения выбора. В случае checkbox и radiobutton это поведение нежелательно, так как пользователь может захотеть выбрать несколько опций или проверить состояние кнопки перед закрытием меню.

Пример проблемы:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Пункт меню</a></li>
    <li class="dropdown-item">
      <input type="checkbox" id="checkbox1">
      <label for="checkbox1">Checkbox</label>
    </li>
    <li class="dropdown-item">
      <input type="radio" name="radioGroup" id="radio1">
      <label for="radio1">Radio 1</label>
    </li>
    <li class="dropdown-item">
      <input type="radio" name="radioGroup" id="radio2">
      <label for="radio1">Radio 2</label>
    </li>
  </ul>
</div>

Результат:

Попробуйте кликнуть по checkbox или radiobutton (по надписи) — меню закроется.

Решение

В Bootstrap 5 можно использовать атрибут data-bs-auto-close, чтобы полностью отключить автоматическое закрытие меню. Например:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Пункт меню</a></li>
    <li class="dropdown-item">
      <input type="checkbox" id="checkbox1">
      <label for="checkbox1">Checkbox</label>
    </li>
    <li class="dropdown-item">
      <input type="radio" name="radioGroup" id="radio1">
      <label for="radio1">Radio 1</label>
    </li>
    <li class="dropdown-item">
      <input type="radio" name="radioGroup" id="radio2">
      <label for="radio2">Radio 2</label>
    </li>
  </ul>
</div>

Результат:

Минус: Меню останется открытым после любых кликов, включая клики за пределами checkbox и radiobutton. Это поведение может быть нежелательным.

Вывод

Использование checkbox и radiobutton в меню dropdowns Bootstrap 5 может быть удобным, если правильно настроить их поведение. Чтобы меню не закрывалось автоматически, рекомендуется перехватывать событие click на этих элементах и предотвращать его распространение. Это позволяет пользователю выбирать опции, не теряя доступ к меню.