🐛 Select2 showing up below Bootstrap Modals

[NewSoupVi]

Bug Description

This is a known issue with a suggested fix: https://select2.org/troubleshooting/common-problems

The suggested fix is quite annoying with django-select2 though, since we don't make the select elements ourselves. We've had to resort to using a "general fix" like this:

$(document).ready(() => {
    $('select').each((index, element) => {
        const $modalParent = $(element).closest(".modal");
        if (!$modalParent.length) return;
        console.log($modalParent)

        $(element).select2({
            dropdownParent: $modalParent
        });
    });
});

But this is quite error prone itself and feels more like taking a crowbar to the issue.

Steps to Reproduce

Make a modal that has a django-select2 select element as its child, and that opens with an <a> using data-bs-target.

<a href="#" data-bs-target="#myModal" data-bs-toggle="modal">
{% include "snippets/modals/myModal.html" with modalname="myModal" %}

And then inside of that myModal.html, we have

{{ myModalForm.mySelectionElement }} <- select element

Expected Behavior

I expected the select element to display above the modal.

[codingjoe]

Hi @NewSoupVi,

Thanks for reaching out. I believe this issue isn't related to the Django implementation, but rather to the JS package. You might have better luck reaching out to the Select2 community, over here: https://github.com/select2/select2

Please let me know if there is anything else we can help you with.

Cheers,
Joe

[NewSoupVi]

Well, they know the problem exists and have a suggested fix for it, but unfortunately the fix is a bit hard to apply here because it assumes you have "direct control" over your select2s, which is not as true when using this django app.

But yeah I understand it's not really "your issue" :) Thanks for replying, I'll try to find a solution that works for me

[codingjoe]

I see. You can't solve this with data-attributes alone. However, we wrote our JS implementation extendible. Just create a subclass of the Django widget and give it a custom class name. Next add a small script like this:

$('.my-custom-select2').djangoSelect2({dropdownParent: $('#myModal')})

That should be it. Please tell me if you run into any issues.