Use Select2 in a Bootstrap Modal (dropdownParent fix)

To make Select2 work inside a Bootstrap modal, pass the modal as the dropdownParent option when initialising Select2. Without it, the modal’s focus trap blocks every interaction with the dropdown, which renders outside the modal.

Contents

The fix
Initialise on modal open (recommended)
Why this is necessary — focus traps
Multiple selects in the same modal
Frequently asked questions
Related guides
References

Last verified: 2026-05-17 with Select2 4.0.13 and Bootstrap 5.3. Originally published 2023-10-10, rewritten and updated 2026-05-17.

The fix

$('#products').select2({
    dropdownParent: $('#products-modal')
});

dropdownParent tells Select2 to append its dropdown inside the modal’s DOM instead of <body>. Once inside the modal, the dropdown is part of the focus-trapped region and clicks/keystrokes reach it normally.

Select2 in Bootstrap modal — dropdownParent fix, init on shown.bs.modal, same for BS 3/4/5

// Bootstrap 5
$('#products-modal').on('shown.bs.modal', function () {
    $('#products').select2({
        dropdownParent: $('#products-modal')
    });
});

Waiting for shown.bs.modal means the modal is fully visible and any responsive sizing has settled before Select2 measures the dropdown’s width. Prevents the zero-width-dropdown bug.

Why this is necessary — focus traps

Bootstrap modals add tabindex="-1" and trap focus inside the modal, both for accessibility and to prevent background-page interactions while the modal is open. Select2 appends its dropdown to <body> by default — outside the modal. The focus trap intercepts the dropdown’s clicks and keystrokes because they happen “outside” the modal even though the user sees them inside.

Moving Select2’s dropdown into the modal (via dropdownParent) puts it back inside the focused region.

$('#products-modal').on('shown.bs.modal', function () {
    $(this).find('select.select2').each(function () {
        $(this).select2({
            dropdownParent: $('#products-modal')
        });
    });
});

Loop every select.select2 inside the modal and pass the same dropdownParent to each. Works for as many selects as the form needs.

Frequently asked questions

Why doesn’t Select2 work in Bootstrap modals by default?

Modals use tabindex="-1" on the modal container, which traps focus inside the modal for accessibility. Select2’s dropdown is appended to <body> by default — outside the modal — so the focus trap intercepts every click and keystroke meant for the dropdown. Pointing Select2’s dropdownParent at the modal puts the dropdown inside the focus-trapped region, where it can receive input normally.

Which element should I pass to dropdownParent?

The element representing the modal — the one with class modal or modal-content. Either works; modal-content can give slightly cleaner positioning. Don’t pass a child of the modal that doesn’t fill its width, or the dropdown will be clipped.

Does this same fix apply to Bootstrap 5 / 4 / 3?

Yes — the modal focus-trap behavior is the same across versions. The Select2 fix (dropdownParent: $('#myModal')) is identical. The only thing that changes between Bootstrap versions is the modal markup and JS API for opening/closing, not the focus model.

Should I initialise Select2 before or after the modal opens?

Either works as long as dropdownParent is set. The cleanest pattern is to initialise inside the shown.bs.modal event (Bootstrap 4/5) so the modal is fully visible and any responsive sizing has settled. Initialising too early — while the modal is hidden — can produce zero-width dropdowns the same way ApexCharts does.