When using Select2 with a multiple select/tag input inside a Bootstrap modal, the dropdown is positioned too far to the left on the first open. Closing and reopening the dropdown positions it correctly.

This appears to happen when custom CSS changes the rendered multiple-selection layout, specifically setting:

.select2-selection__rendered { margin-bottom: 0; }

The issue only occurs on the first open. On subsequent opens, Select2 positions the dropdown correctly.

Expected Behavior
The dropdown should align with the visible Select2 container on first open.

Actual Behavior
On first open, the detached dropdown container receives an incorrect inline left value.

Example first open:

<span class="select2-container select2-container--select-tags select2-container--open" style="position: absolute; top: 76.25px; left: 68.4px;">

After closing and reopening:

<span class="select2-container select2-container--select-tags select2-container--open" style="position: absolute; top: 76.25px; left: 76px;">

So the first-open dropdown is offset by about 7.6px.

Steps To Reproduce

1. Create a multiple Select2 tags input inside a Bootstrap modal.
2. Use a custom theme/style for the rendered selection, including:

.select2-selection__rendered { margin-bottom: 0; }

3. Open the modal.
4. Open the Select2 tags dropdown for the first time.
5. Observe that the dropdown is shifted left.
6. Close and reopen the dropdown.
7. Observe that the dropdown aligns correctly.

Relevant Observations
The visible Select2 container and first-open dropdown have different left values:

container.getBoundingClientRect().left // 76 dropdownContainer.getBoundingClientRect().left // 68.4
On second open, both align at 76.

This suggests Select2 may be measuring the selection/container before layout has fully settled on first open, then using the corrected dimensions on subsequent opens.

Workaround
Using the select’s immediate wrapper as dropdownParent fixed the issue:

$('#statusTag').select2({ tags: true, theme: 'select-tags', width: '100%', dropdownParent: $('#statusTagWrapper') });
Previously, the dropdown parent was the modal/offcanvas ancestor. Changing it to the direct wrapper made the first-open positioning correct.

Suggested Fix
Select2 could remeasure the selection container after rendering the dropdown but before finalizing the dropdown container’s inline left/top, especially for multiple/tag selections where .select2-selection__rendered can affect layout.

Potentially, _positionDropdown() could use the final rendered container rect after dropdown/results insertion, or schedule a microtask / animation-frame measurement before setting the first-open inline position.