Bootstrap Modal不会使用Select2下拉列表滚动

Question

我有一个带有select2下拉列表的boostrap模式：

<div id="add-event" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">

            ....

            <div class="organizer-options form-group id="organizer-search">
                <span>Hosted by:</span>
                <select class="form-control organizer-search" name="organizer-search" autocomplete="off">
                </select>
            </div>            

我在另一个JS文件中初始化select2：

$(".organizer-search").select2({
    dropdownParent: $("#add-event"),
    minimumInputLength: 3,
    placeholder: "Select the host",
    ajax: {
        url: "/people/search",
        method: "get",
        dataType: "json",
        delay: 250,
        data: function(params) {
            return {
                term: params.term
            };
        },
        processResults: function(data) {
            return {
                results: data
            };
        }
    }
});

我将dropdownParent: $("#add-event")行添加到select2 init中，否则我无法专注于模态内的select2。我在尝试所有模态之前都尝试过$.fn.modal.Constructor.prototype.enforceFocus = function() {};。

这两个都可以专注于下拉菜单，但禁止在移动设备上滚动模式（chrome和firefox）。