I have a multi select dropdown with select2 plugin. When the dropdown is open, user scrolls the window and click somewhere the click event is not getting triggered. Instead the windows scrolls automatically and focuses on the dropdown.

Please find the demo here. In the example scrolldown and open the select box, keep the select box opened, scroll top and click on Content 1

Demo

$(document).ready(function() {
  $("#multiselectDropdown").select2()
  $("h1").on("click", function() {
    alert("clicked " + $(this).text())
  })
});

<link rel="stylesheet" href=".0.5/css/select2.min.css"/>
<script src=".1.1/jquery.min.js"></script>
<script src=".0.5/js/select2.min.js"></script>
<h1>
  Content1
</h1>
<h1>
  Content2
</h1>
<h1>
  Content3
</h1>
<h1>
  Content4
</h1>
<h1>
  Content5
</h1>
<h1>
  Content6
</h1>
<h1>
  Content7
</h1>
<h1>
  Content8
</h1>
<h1>
  Content9
</h1>
<h1>
  Content10
</h1>
<select id="multiselectDropdown" style="width:200px" multiple>

        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>

        </select>

I have a multi select dropdown with select2 plugin. When the dropdown is open, user scrolls the window and click somewhere the click event is not getting triggered. Instead the windows scrolls automatically and focuses on the dropdown.

Please find the demo here. In the example scrolldown and open the select box, keep the select box opened, scroll top and click on Content 1

Demo

$(document).ready(function() {
  $("#multiselectDropdown").select2()
  $("h1").on("click", function() {
    alert("clicked " + $(this).text())
  })
});

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/select2/4.0.5/css/select2.min.css"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<h1>
  Content1
</h1>
<h1>
  Content2
</h1>
<h1>
  Content3
</h1>
<h1>
  Content4
</h1>
<h1>
  Content5
</h1>
<h1>
  Content6
</h1>
<h1>
  Content7
</h1>
<h1>
  Content8
</h1>
<h1>
  Content9
</h1>
<h1>
  Content10
</h1>
<select id="multiselectDropdown" style="width:200px" multiple>

        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>

        </select>

• javascript
• jquery
• html
• jquery-select2

2 Answers 2

This seems to be a plugin problem , as you can see in their github repository issues:

closing dropdown which is out of the viewport causes viewport to scroll #3663

and

Scroll back to the input field when lost focus (after select2:closing) #4983

User zoka123 mentioned that this problem can be solved by menting out this part in select2/dist/js/select2.full.js:

line 1407 self.$selection.focus(); 

This issues is still open , and last activity was on 29 Dec 2017. So your best bet is to ment out this line of code for now and see if it will fix your problem.

If you still encountered this problem, how I fixed the issue was via css.

.select2-dropdown .select2-results__option {
  position: relative;
}