I'm attempting to incorporate a multiselect input from the bootstrap-select Library into a Bootstrap dropdown menu. The issue arises when I open the dropdown menu and click on the multiselect input, causing the menu to close and preventing me from using the input within the dropdown menu.
Even if I place the multiselect input outside of the dropdown menu, the same issue occurs. How can I ensure that when I interact with the multiselect input inside the dropdown, the menu remains open so I can freely select options?
My code can be found here (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've experimented with various JQuery solutions for similar issues, but none seem to solve the problem. Does anyone have any suggestions on how to resolve this?