当我们点击选择 2 下拉菜单时，将焦点设置为搜索文本字段

Question

我正在使用 select2.js 版本：3.4.3 和 bootstrap 我有一个下拉菜单。

当我点击下拉列表时，我得到了带有搜索文本字段的列表。但是我的光标没有集中在搜索文本字段上。

 <form:select path="yearAge" id="yearAgeId"
    cssClass="form-control search-select static-select">
    <form:option value="">Years</form:option>
    <c:forEach var="i" begin="1" end="125"  >
    <form:option value="${i}" label="${i}"></form:option>
    </c:forEach>
</form:select>

$(".search-select.static-select").select2({
    placeholder: $(this).attr('placeholder'),
    allowClear: true
});

当我点击下拉光标时，焦点应该设置为自动搜索文本字段。

谢谢…！！！！！

原文由 user3386877 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个问题可以通过使用 setTimeout() 函数延迟 focus() 执行时间来解决，我们可以通过修改 select2.js 中第 3321 行的函数来实现

container.on('open', function () {
  self.$search.attr('tabindex', 0);
  //self.$search.focus(); remove this line
  setTimeout(function () { self.$search.focus(); }, 10);//add this line

});

原文由 YOusaFZai 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果 jQuery 3.6.0 导致了这个，你可以使用这个：

  $(document).on('select2:open', () => {
    document.querySelector('.select2-search__field').focus();
  });

原文由 Hammad Ahmed khan 发布，翻译遵循 CC BY-SA 4.0 许可协议