bootstrap-select selectpicker can't choose in dropdown-menu

Question

I can't find a way to use the plugin bootstrap-select inside a dropdown-menu.

The select just do not show.

I have added this jQuery not to close the dropdown-menu by clicking in it:

$(document).on("click", ".menuplus", function (e) {
  e.stopPropagation();
});

And I don't think that it does not appear because of this stopPropagation condition.

I did a jsfiddle with the minimum required, i feel like it's bootstrap-select plugin bug!

Any chance to make it work?

https://jsfiddle.net/d3yqo9wc/4/

It's all with the old version of Bootstrap 4 /jQuery 3.3.1 because the project on which we work on is it using it!

SOLUTION

Thanks to @Swati reply I could update the jsfiddle:

https://jsfiddle.net/jdtnsmwu/46/

How this could be better? :)

Answer 1

One way to solve this is to manually control the behaviour of dropdown menu. So, whenever menu is clicked add/remove class show from dropdown as well from dropdown-menu.

Also, now added some more code for manually closing the menu itself when click outside of the dropdown-div. You can add similar code for choose button to work.

Demo Code :

$('button.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 `dropdown-div` tag if yes ..hide menu
  if (!$('#dropdown-div').is(e.target) &&
    $('#dropdown-div').has(e.target).length === 0 &&
    $('.show').has(e.target).length === 0
  ) {
    //remove clases and add attr 
    $('#dropdown-div').removeClass('show')
    $('#dropdown-div > button').attr('aria-expanded', 'false');
    $("#dropdown-div").children('div.dropdown-menu').removeClass('show')
  }
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>


<h1>Hello, world!</h1>

<select id="SelectGlobalSearch" class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
<!--added id -->
<div id="dropdown-div" class="dropdown mt-5">
  <!-- removed data-toggle="dropdown"-->
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu menuplus text-center" aria-labelledby="dropdownMenu2">

    <div class="p-5">
      <select id="SelectGlobalSearch2" class="selectpicker">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>

    <button class="btn btn-primary">
       Choose
     </button>

  </div>
</div>