Currently, I am working on generating a dynamic set of bootstrap-select widgets that include a dropdown. My main challenge lies in preventing the select from closing the dropdown, which requires me to use 'event.stopPropagation()' on the dropdown itself.
However, when I apply this solution, the bootstrap select fails to open upon clicking, whereas a normal select works fine. Is there a way to ensure that the bootstrap select functions properly within a bootstrap dropdown while stopPropagation() is activated on the dropdown click event?
Edit:
For reference, here is an example JsFiddle Test App: https://jsfiddle.net/ChaseRLewisAlamode/r4k5cy9s/1/
HTML
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Manage Statuses <span class="caret"></span>
</button>
<ul class="status-dropdown dropdown-menu" role='menu'>
<li role='presentation'>
<div class='status-item'>
<div class='status-text'>My Status</div>
<select class='selectpicker'>
<option value='active' selected>Active</option>
<option value='pending'>Pending</option>
<option value='sold'>Sold</option>
<option value='inactive'>Inactive</option>
</select>
</div>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Always Visible <span class="caret"></span>
</button>
<ul class="visible-dropdown dropdown-menu" role='menu' style="display: block;">
<li role='presentation'>
<div class='status-item'>
<div class='status-text'>My Status</div>
<select class='selectpicker'>
<option value='active' selected>Active</option>
<option value='pending'>Pending</option>
<option value='sold'>Sold</option>
<option value='inactive'>Inactive</option>
</select>
</div>
</li>
</ul>
</div>
Javascript
$(".status-dropdown").on('click',function(e){
e.stopPropagation();
});