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

Question

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

Answer 1

The problem is this:

tabindex="-1"

When you delete this attribute, it works correctly.

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

(Working JSFiddle: http://jsfiddle.net/d3fr0aeo/)