Chrome - if jquery-simple-combobox is inside a modal collapses when mouse dragging

I'm trying to learn to work with jquery.scombobox but I'm stuck when adding the scombobox to a modal

<div id="modalA" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">         <div class="modal-dialog">                 <div class="modal-header">                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                     <h4 class="modal-title">My Modal</h4>                 </div>                 <div class="modal-body">                     <select id="combo-021">                         <option value="1">item 1</option>                         <option value="2">item 2</option>                         <option value="3">item 3</option>                         <option value="4">item 3</option>                         <option value="5">item 3</option>                         <option value="6">item 3</option>                         <option value="7">item 3</option>                         <option value="8">item 3</option>                         <option value="9">item 3</option>                         <option value="10">item 3</option>                         <option value="11">item 3</option>                         <option value="12">item 3</option>                         <option value="13">item 3</option>                         <option value="14">item 3</option>                         <option value="15">item 3</option>                         <option value="16">item 3</option>                         <option value="17">item 3</option>                         <option value="18">item 3</option>                         <option value="19">item 3</option>                         <option value="20">item 3</option>                         <option value="21">item 3</option>                         <option value="22">item 3</option>                         <option value="23">item 3</option>                         <option value="24">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                         <option value="3">item 3</option>                     </select>             </div>         </div>     </div>    $('#combo-021').scombobox({ showDropDown: true // this is what is set by default }); 

For multiple items it adds a scrollbar in the right. I can scroll trough the items by using the mouse scroll wheel but when trying to click on the scrollbar and dragging it, the dropdown collapses. Did anyone encounter the same problem? Why is this happening?

JSFiddle

1 Answers

Answers 1

Problem is

tabindex="-1" 

When you delete this attribute, it work correct.

Here is info about atribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

http://jsfiddle.net/d3fr0aeo/

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati