Chrome - 如果 jquery-simple-combobox 在模态框内，则鼠标拖动时折叠

Question

我正在尝试学习使用 jquery.scombobox，但在将 scombobox 添加到模态框时我被卡住了

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

对于多个项目，它会在右侧添加一个滚动条。我可以使用鼠标滚轮滚动浏览项目，但是当尝试单击滚动条并拖动它时，下拉列表会崩溃。有没有人遇到同样的问题？为什么会这样？

JSFiddle

Answer 1

问题是这样的：

tabindex="-1"

当你删除这个属性时，它会正常工作。

这里有更多关于tabindex的信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

（工作 JSFiddle：http://jsfiddle.net/d3fr0aeo/）