When I place a dynamically populated multiselect in a dropdown overlay, the multiselect's dropdown does not display when clicked. The exact same multiselect works just fine when it's not in a dropdown. See a fiddle that reproduces the issue here http://jsfiddle.net/yhnukfsz/6/ (started with the answer to this question).
The broken multiselect in question:
<div class="btn-group">
<button type="button" id="dropBtn" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<form>
<select class="form-control" id="mult2" multiple="multiple">
</select>
<button>
foobar
</button>
</form>
</li>
</ul>
</div>
And the JS:
$('.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');
}
});
setUpMultiselect('#mult1');
setUpMultiselect('#mult2');
function setUpMultiselect(id) {
$(id).multiselect({
enableFiltering: true,
includeFilterClearBtn:false,
enableCaseInsensitiveFiltering: true,
selectAllJustVisible : true,
includeSelectAllOption : true,
nonSelectedText:"Filter ...",
numberDisplayed : 1
});
const options = [
{
title: 'title1', label: 'label1', id: 'id1', selected: true,
},{
title: 'title2', label: 'label2', id: 'id2', selected: true,
},{
title: 'title3', label: 'label3', id: 'id3', selected: true,
}]
$(id).multiselect('dataprovider', options);
$(id).multiselect('rebuild');
}
$('#dropBtn').click(() => {
setTimeout(() => {
setUpMultiselect('#mult1');
setUpMultiselect('#mult2');
}, 500)
})
Additional things I've tried that haven't fixed the issue include rebuilding/reinitializing the multiselect on the dropdown click event with and without a delay.