My concern is about integrating a select2 dropdown into my popover. The issue I am facing is that when I open the popover for the first time, the select2 dropdown renders correctly. However, upon closing and reopening the popover, it displays two select2 dropdowns, with one being unclickable:
https://i.sstatic.net/Xok8I.png
I have attempted the z-index solution suggested in this Stack Overflow thread as well as the solution mentioned in this other thread, but unfortunately, neither of them resolved the issue.
I also explored the possibility of using the dropdownParent property to render it properly within Bootstrap modals, however, that did not work either.
Snippet of My HTML Structure:
<div class="actions-row mb-5">
<button type="button" class="btn popover-toggle add-to-program-popover" data-placement="bottom">
Add to program
</button>
<div class="program-container" style="display: none">
<select name="movement-program-select" class="movement-program-select">
<option value=""></option>
<option value="Program 1">Program 1</option>
<option value="Program 2">Program 2</option>
<option value="Program 3">Program 3</option>
</select>
<i class="fa fa-floppy-o add-to-program" aria-hidden="true"></i>
<hr>
<a class="create-new-program">
<i class="fa fa-plus-square-o add-item"></i>
Create new program</a>
</div>
</div>
This is the JS Code I'm Using:
$('button.add-movement-to-program').on('click', function(e) {
$('.add-to-program-table-container').show();
});
$('button.add-to-program-popover').popover({
container: 'main',
html: true,
content: function() {
return $('.program-container').html();
}
});
$('button.add-to-program-popover').click(function() {
// console.log(1);
// if (!$('.movement-program-select').hasClass("select2-hidden-accessible")) {
// console.log(2);
$('.movement-program-select').select2({
container: 'body',
width: "100%",
dropdownParent: $('.popover-content')
});
// }
});
Can anyone suggest alternative solutions to fix this issue?
Here is the link to my JSFiddle for reference: http://jsfiddle.net/fpk047rh/1/