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?
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/[email protected]/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/[email protected]/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>