javascriptjqueryjquery-select2bootstrap-5

Select2 search input not working on bootstrap5

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

Solution

  • Really not sure why, but dropdownParent will fix it.

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