🐛 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.