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.
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.
Initialise on modal open (recommended)
// 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.
Multiple selects in the same modal
$('#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
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.
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.
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.
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.
Related guides
- How to Auto-Focus a Select2 Dropdown on Page Load
- How to Check if a Bootstrap Modal Is Open with jQuery
- How to Make the First Option Selected in a select with jQuery
References
Select2 dropdownParent option: select2.org/configuration/options-api. Bootstrap modals: getbootstrap.com/docs/5.3/components/modal. Select2 issue #1645 (the original bug report): github.com/select2/select2/issues/1645.
