9

I use Bootstrap button dropdown to show a form. I have disabled dropdown disappearing onclick (while user manipulates the form) by calling stopPropagation. One of the elements of the form is a dropdownlist. If I use a native html select element everything is okay (except is looks ugly). If I replace it with bootstrap-select (which imitates select by divs), I can not select a value (as there is not enough place in the button dropdown). I tried to apply a workaround to specify container: 'body' for bootstrap-select. It helps to see dropdownlist values but button dropdown is closed when I select the element (I guess it happens as boostrap-select belongs to body which is higher then button dropdown to which click-propagation is applied).

            <div class="btn-group">
                <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
                    Take <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <form>    
                            <select id="mySelect" class="selectPicker">
                              <option>1</option>
                            </select>
                        </form>
                    </li>
                </ul>
            </div>

<script type="text/javascript">
  $('.dropdown-menu').click(function(e) {
                e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
            });

  $('.selectpicker').selectpicker({container: 'body'});
</script>
SiberianGuy
  • 24,674
  • 56
  • 152
  • 266

2 Answers2

13

The button menu dropdown closes upon selecting any of the options because essentially, it jumps over your stopPropagation since the select container is set to the body. You'll need to add a bit of javascript to check if the event.target (the element that dispatched the event in the first place) was one of the bootstrap-select elements. If the event.target is one of the bootstrap-select "option" elements, then you'll want to stopPropagation. You'll notice though that this will also prevent the bootstrap-select from closing, so you can just do that manually by removing the open class from the element with the bootstrap-select class.

DEMO

JQUERY:

$('.dropdown-menu').on('click', function(event) {
    event.stopPropagation();
});

$('.selectpicker').selectpicker({
    container: 'body'
});

$('body').on('click', function(event) {
    var target = $(event.target);
    if (target.parents('.bootstrap-select').length) {
        event.stopPropagation();
        $('.bootstrap-select.open').removeClass('open');
    }
});

HTML:

<div class="btn-group">
    <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
        Take <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <form>    
                <select class="selectpicker">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                    </select>
            </form>
        </li>
    </ul>
</div>
Community
  • 1
  • 1
jme11
  • 17,134
  • 2
  • 38
  • 48
1

I changed your function a bit and tested in Chrome and FF.

$("ul.dropdown-menu").on("click", "form", function(e) {
    e.stopPropagation(); });

Working Example

Simple Sandman
  • 900
  • 3
  • 11
  • 34
Sebsemillia
  • 9,366
  • 2
  • 55
  • 70