升级至jQuery 3.6.1后Bootstrap Select2自动聚焦功能失效问题

开发者阿泽

2026-8-20

解决jQuery 3.6.1下Select2自动聚焦失效问题

原因分析

jQuery 3.6.0及以上版本调整了focus()方法的执行时机，改为异步触发，而Select2原有的自动聚焦逻辑依赖同步的焦点触发机制，导致组件初始化后无法正确捕获焦点。

解决方案

方案1：延迟触发聚焦

利用setTimeout将聚焦操作延迟到Select2完全初始化后执行：

// 初始化Select2后绑定打开事件触发聚焦
$('#your-select-element').select2().on('select2:open', function() {
  setTimeout(() => {
    $(this).data('select2').$dropdown.find('.select2-search__field').focus();
  }, 10);
});

如果需要页面加载时直接打开并聚焦：

$('#your-select-element').select2({
  // 你的组件配置项
}).trigger('select2:open');

setTimeout(() => {
  $('#your-select-element').data('select2').$dropdown.find('.select2-search__field').focus();
}, 10);

方案2：重写Select2内部聚焦逻辑

覆盖Select2的下拉框打开方法，适配jQuery的异步焦点处理：

$.fn.select2.amd.require(['select2/utils', 'select2/dropdown'], function(Utils, Dropdown) {
  var OriginalDropdown = Dropdown;
  var CustomDropdown = Utils.Decorate(OriginalDropdown, function(decorated, $element, options) {
    decorated.call(this, $element, options);
  });

  CustomDropdown.prototype.open = function() {
    var self = this;
    this._super();
    setTimeout(function() {
      self.$search.find('input').focus();
    }, 0);
  };

  $.fn.select2.amd.define('select2/dropdown', [], function() {
    return CustomDropdown;
  });
});

之后正常初始化Select2即可，无需额外添加聚焦代码。