Opening select2 (clicking or programmatically) locks up scrolling elsewhere on page

I can’t reproduce outside of my application so it may be something I’m doing wrong but here goes…

I have a select2 (4.0.6-rc.1) on my page that is created with these options:

            allowClear: true,
            theme: 'bootstrap',
            minimumResultsForSearch: 10,
            closeOnSelect: false,
            dropdownParent: $('.myContainer'),
            matcher: myMatcherFunc

The element is on a bootstrap dropdown that is triggered by clicking a particular button. Once the dropdown is displayed, I programmatically open the select2 dropdown and keep it open while the user is interacting with it. This all looks good and works well. The problem is that as soon as I make the call to .select2(‘open’), I lose the ability to scroll on my page, even once the select2 is closed and it’s container dropdown is closed. I’ve also tried disabling opening the select2 when my dropdown is displayed. In this case, clicking the select2 to display its dropdown and calling .select2(‘open’) both cause the same problem. I finally tried calling .select2(‘open’) before my dropdown was even displayed and the behavior is the same.

So, I’m trying to figure out if this is an issue anyone else has seen or if there are known issues with hosting a select2 in a dropdown. I did try a vanilla jsbin but wasn’t able to reproduce. If anyone has any other things to look out for that might somehow be related to this, please let me know.



Non-issue. I had a rogue select2:closing event listener that was calling e.preventDefault(). Thanks to anyone who took the time to read my post.

For anyone else who stumbles across this, I had a similar issue with scroll events in a similar layout and recommend checking out javascript - Select2 Bootstrap Modal with Modal Scroll - Stack Overflow