2

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.

  • Hi , check if [this](https://stackoverflow.com/a/66077733/10606400) answers work for you . It has similar issue but the select-box is boostrap select. – Swati Apr 24 '21 at 05:10

0 Answers0