bootstrap-select not working inside of Bootstrap dropdown menu

Question

I am trying to put a multiselect input, from bootstrap-select Library inside of a Bootstrap dropdown menu. The problem is that when I have opened the Bootstrap dropdown menu and I click on the multiselect input, the dropdown menu closes, and it seems impossible to use the input inside of the dropdown menu.

Outside of the dropdown menu, the input works fine, but still if the dropdown menu is open, it closes as soon as I click on the multiselect input, even if the multiselect input is placed outside the Bootstrap dropdown menu

How can I make it work, so when I click on the multiselect input inside the dropdown, the dropdown menu stays open, and I can freely choose any of the options inside the multiselect input?

Here is my code (JSFiddle):

<div class="dropdown mb-4 text-dark" id="myDD">
    <a class="btn dropdown-toggle text-muted btn-block btn-grey py-2 font-weight-bold "
       style="color: black !important; font-size: .8em;" href="#" role="button"
       id="dropdownMenuLink"
       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
       data-display="static">
        <i class="fas fa-sliders-h mr-2"></i> Menu
    </a>
    <div class="dropdown-menu bg-transparent border-0 mt-2"
         aria-labelledby="dropdownMenuLink"
         style="position: relative; float: none;">
        <form>
            <div class="input-group mb-3">
                <label for="inputGroupSelect05"
                       class="text-dark d-block w-100 mb-1">Input text</label>
                <input type="text" class="form-control form-control-sm" placeholder="text input">
            </div>

            <div class="input-group mb-3 multi-select ">
                <label for="inputGroupSelect02" class="text-dark d-block w-100 mb-1">Click causes close of dropdown</label>
                <select style="color: #495057 !important;" class="w-100" multiple data-selected-text-format="count" data-style="custom-select custom-select-sm" id="test-select">
                    <option>1</option>
                    <option>2</option>
                    <option selected>3</option>
                    <option selected>4</option>
                    <option selected>5</option>
                </select>
            </div>
        </form>
    </div>
</div>

I have tried using many of the soloutions with JQuery for related problems, but I can't get any of them to work. Any one with an idea on what I could do?

score 2 · Accepted Answer · answered Feb 06 '21 at 14:02

Your select-box gets open but the menu gets hide so to avoid this one way would be controlling opening/closing of menu manually . So, whenever menu is clicked add/remove class show from dropdown as well from dropdown-menu .

Demo Code :

$(document).ready(function() {
  $('#test-select').selectpicker();
  $('#test-select2').selectpicker();
//onclick of dropdown toggle 
  $('#myDD > a.dropdown-toggle').on('click', function(event) {
    $(this).parent().toggleClass('show')//addor remove class
    $(this).attr('aria-expanded', $(this).attr('aria-expanded') == 'false' ? 'true' : 'false'); //add true or false
    $("div[aria-labelledby=" + $(this).attr('id') + "]").toggleClass('show') //add class/remove
  });

  $('body').on('click', function(e) {
  //check if the click occur outside `myDD` tag if yes ..hide menu
    if (!$('#myDD').is(e.target) &&
      $('#myDD').has(e.target).length === 0 &&
      $('.show').has(e.target).length === 0
    ) {
     //remove clases and add attr 
      $('#myDD').removeClass('show')
      $('#myDD > a').attr('aria-expanded', 'false');
      $("#myDD").children('div.dropdown-menu').removeClass('show')
    }
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<div class="dropdown mb-4 text-dark" id="myDD">
  <a class="btn dropdown-toggle text-muted btn-block btn-grey py-2 font-weight-bold " style="color: black !important; font-size: .8em;" href="#" role="button" id="dropdownMenuLink" aria-haspopup="true" aria-expanded="false" data-display="static">
    <i class="fas fa-sliders-h mr-2"></i> Menu
  </a>
  <div class="dropdown-menu bg-transparent border-0 mt-2" aria-labelledby="dropdownMenuLink" style="position: relative; float: none;">
    <form>
      <div class="input-group mb-3">
        <label for="inputGroupSelect05" class="text-dark d-block w-100 mb-1">Input text</label>
        <input type="text" class="form-control form-control-sm" placeholder="text input">
      </div>

      <div class="input-group mb-3 multi-select ">
        <label for="inputGroupSelect02" class="text-dark d-block w-100 mb-1">Click causes close of dropdown</label>
        <select style="color: #495057 !important;" class="w-100" multiple data-selected-text-format="count" data-style="custom-select custom-select-sm" id="test-select">
          <option>1</option>
          <option>2</option>
          <option selected>3</option>
          <option selected>4</option>
          <option selected>5</option>
        </select>
      </div>

    </form>

  </div>
</div>

<div class="input-group mb-3 multi-select ">
  <label for="inputGroupSelect02" class="text-dark d-block w-100 mb-1">Click causes close of dropdown if open</label>
  <select style="color: #495057 !important;" class="w-100" multiple data-selected-text-format="count" data-style="custom-select custom-select-sm" id="test-select2">
    <option>1</option>
    <option>2</option>
    <option selected>3</option>
    <option selected>4</option>
    <option selected>5</option>
  </select>
</div>

What did you change in the HTML to make Bootstrap default dropdown JS code to be excluded?, When i add only the JQuery into my project it wont work, but if I replace my HTML code with yours it works, so what did you do differently? — MichaelJorgensenDK, Feb 08 '21 at 14:49
check `a` tag i have removed `data-toggle="dropdown"` because now we controlling that from jquery code. — Swati, Feb 08 '21 at 15:38

score 1 · Answer 2 · edited Aug 17 '21 at 07:55

Bootstrap select no longer supports Bootstrap 5, so use multiple-select library instead. https://multiple-select.wenzhixin.net.cn/examples

*In addition to the alternative above, bootstrap-select now has Bootstrap 5 support if you were to upgrade your code snippet to use BS5. The current compatible version to use is v1.14.0-beta2. I see Swati also removed data-toggle for you - any further data-* attributes must be changed to data-bs-* for BS5 (further info here; at time of writing, this does not apply to bootstrap-select atributes, e.g. data-live-search remains as is).

bootstrap-select not working inside of Bootstrap dropdown menu

2 Answers2

Linked