This issue occurs because Bootstrap modals tend to steal focus from other elements outside of the modal. Since by default, Select2 attaches the dropdown menu to the <body> element, it is considered "outside of the modal".
To avoid this problem, you may attach the dropdown to the modal itself with the dropdownParent setting:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
...
<select id="mySelect2">
...
</select>
...
</div>
...
<script>
$('#mySelect2').select2({
dropdownParent: $('#myModal')
});
</script>This will cause the dropdown to be attached to the modal, rather than the <body> element.
Alternatively, you may simply globally override Bootstrap's behavior:
// Do this before you initialize any of your modals
$.fn.modal.Constructor.prototype.enforceFocus = function() {};See this answer for more information.
See #5048. The problem is that some browsers' implementations of pinch-zoom affect the body element, which Select2 attaches to by default, causing it to render incorrectly.
The solution is to use dropdownParent to attach the dropdown to a more specific element.