jquery-select2 - Select2-drop 不正确的顶部位置

Question

当我一开始专注于 select2 字段时，下拉菜单可以正常打开

但是当我选择其中一项时，下拉列表的顶部位置错误

如果我不集中注意力并再次集中注意力，下拉菜单就没有问题

如何解决？

Answer 1

对于那些像我一样来自谷歌的人：

第一次单击下拉菜单以及在没有结果的搜索后第一次单击下拉菜单时，会出现下拉菜单的错误位置。

这是一个似乎适用于许多人（包括我）的解决方法。我的实现如下：

<select class="form-control" data-use-select2="true" name="assessment[assigned_to_id]" id="assessment_assigned_to_id">
<option value="">Select User...</option>
<option value="12">org0user0@test.com</option>
<option value="11">org0user1@test.com</option>
</select>
<select class="form-control" data-use-select2="true" name="assessment[approver_id]" id="assessment_approver_id" >
<option value="">Select User...</option>
<option value="12">org0user0@test.com</option>
<option value="11">org0user1@test.com</option>
</select>

    // data-select2 conflicts with library code. data-something-select2 works
    // set the dropdownParent to fix positioning error
    // https://github.com/select2/select2-bootstrap-theme/issues/41#issuecomment-310825598
    $("select[data-use-select2]").each(function() {
        $(this).select2({
            theme: "bootstrap4",
            dropdownParent: $(this).parent()
        });
    });