javascript - Select2 multi select dropdown causing window scroll - Stack Overflow

admin管理员组

文章数量:1022843

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

Share Improve this question Follow edited Feb 22, 2018 at 11:00 Jerry asked Feb 22, 2018 at 10:25 JerryJerry 1,00744 gold badges1818 silver badges4949 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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;
}

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

Share Improve this question Follow edited Feb 22, 2018 at 11:00 Jerry asked Feb 22, 2018 at 10:25 JerryJerry 1,00744 gold badges1818 silver badges4949 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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;
}

本文标签： javascriptSelect2 multi select dropdown causing window scrollStack Overflow