Select2 search input not working on bootstrap5

Question

I cannot click on the search input dropdown. First of all, I already googled and this is a common problem for select2 with bootstrap3 or bootstrap4, however for bootstrap 5 its a little bit different (I tried remove z-index on bootstrap 4 and its working), I already tried solutions like z-index, $.fn.modal.Constructor.prototype.enforceFocus = function() {}; , $('#mySelect2').select2({ dropdownParent: $('#myModal') }); , and several css but still wont work.

Maybe im missing something im not sure, its been like 4 days, hope u guys can help me.

here jsFiddle : jsfiddle

Answer 1

Really not sure why, but dropdownParent will fix it.

$('.select2').each(function () {
    $(this).select2({
        theme: 'bootstrap-5',
        dropdownParent: $(this).parent(),
    });
});