为了更好地理解tabindex元素是如何工作的，完成公认的回答:

The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values:   -a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;   -0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;   -a positive value means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document.

来自:Mozilla开发人员网络

我也有同样的问题，更新.select2-container的z-index应该可以解决这个问题。确保模态的z指数低于select2的z指数。

.select2-container {
    z-index: 99999;
}

更新: 如果上面的代码不能正常工作，也可以像@breq建议的那样从你的模式中删除表索引

对于bootstrap3版本，只需在document ready上使用以下代码:

$(document).ready(function(){
    $.fn.modal.Constructor.prototype.enforceFocus = function () {};
});

在我的项目中，我通过重载select2函数来解决这个问题。现在它将检查是否没有dropdownParent，以及函数是否在父元素类型为div.modal的元素上调用。如果是，它将添加该模态作为下拉列表的父类。

这样，就不必在每次创建select2-input框时都指定它。

(function(){
    var oldSelect2 = jQuery.fn.select2;
    jQuery.fn.select2 = function() {
        const modalParent = jQuery(this).parents('div.modal').first();
        if (arguments.length === 0 && modalParent.length > 0) {
            arguments = [{dropdownParent: modalParent}];
        } else if (arguments.length === 1
                    && typeof arguments[0] === 'object'
                    && typeof arguments[0].dropdownParent === 'undefined'
                    && modalParent.length > 0) {
            arguments[0].dropdownParent = modalParent;
        }
        return oldSelect2.apply(this,arguments);
    };
    // Copy all properties of the old function to the new
    for (var key in oldSelect2) {
        jQuery.fn.select2[key] = oldSelect2[key];
    }
})();

从模式中删除tabindex="-1"。我检查了这个解决方案，它是有效的。

裁判:https://github.com/select2/select2-bootstrap-theme/issues/41

我在github上找到了select2的解决方案

https://github.com/ivaynberg/select2/issues/1436

对于bootstrap 3，解决方案是:

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4重命名了enforceFocus方法为_enforceFocus，所以你需要修补它:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

从以上链接复制的解释:

Bootstrap向focusin事件注册了一个监听器，它检查被聚焦的元素是覆盖本身还是它的后代——如果不是，它只是重新聚焦在覆盖上。随着select2下拉框被附加到正文，这有效地防止你在文本框中输入任何东西。 您可以通过覆盖在模态上注册事件的enforceFocus函数来快速修复这个问题