BootStrapのドロップダウンメニューを閉じないようにする

今更BootStrap感あるけど。

概要

https://getbootstrap.com/docs/3.3/components/#btn-dropdowns
このメニューの中チェックボックス入れた時に、ラベルクリックすると閉じちゃうのを止めたかった

こんなHTML

.btn-group
  %button.btn.btn-default.dropdown-toggle{ 'data-toggle': 'dropdown' }
    Action
    %span.caret
    %ul.dropdown-menu.dropdown-menu-right
      %li
        .checkbox
          %label
            %input{ type: :checkbox }
            Action

対応

BootStrapで、以下のようにページ全体でクリックイベント待ち受けしてメニューを閉じているので

$(document).on('click.bs.dropdown.data-api', clearMenus)

チェックボックスの親も含めて、クリックしてもイベントを伝播しないようにした。

$('.checkbox').on('click.bs.dropdown.data-api', (event) => event.stopPropagation())

メニュー閉じる動作は、ブラウザのネイティブなものではないので event. preventDefault() だと効かないのに注意。