select2 form-control控件按tab切换时无法正常获取焦点问题求助

根本原因 #

Select2 初始化后会隐藏原生的 <select> 标签，生成自定义的 DOM 结构承载交互逻辑。你之前给 .select2-selection__rendered 添加 :focus 伪类规则不生效，是因为这个生成的元素默认不具备可聚焦属性，无法捕获焦点事件。给外层 div.col 加 tabindex 会额外新增一个可聚焦节点，自然会多按一次 tab 才能触发下拉。

解决方案 #

方案1：CSS 方案（优先推荐，兼容现代浏览器） #

利用 :focus-within 伪类，当容器内部隐藏的原生 select 获得焦点时，自动给 Select2 容器添加聚焦样式：

/* 单选 Select2 聚焦样式 */
.select2-container--default .select2-selection--single:focus-within {
  outline: none !important;
  box-shadow: 0 0 5px 2px lightblue !important;
  border-color: #80bdff !important; /* 可选，和Bootstrap表单默认聚焦样式对齐 */
}

/* 如果是多选 Select2 用下面的规则 */
.select2-container--default .select2-selection--multiple:focus-within {
  outline: none !important;
  box-shadow: 0 0 5px 2px lightblue !important;
  border-color: #80bdff !important;
}

使用该方案不需要修改任何 HTML 结构，直接删掉你之前给 div.col 加的 tabindex="0" 属性即可，tab 切换逻辑完全和原生表单一致。

方案2：JS 兼容方案（适配不支持 :focus-within 的旧浏览器） #

如果需要兼容 IE 等不支持 :focus-within 的旧浏览器，可以通过事件监听手动给聚焦的 Select2 容器加自定义样式类：

1. 首先添加自定义 CSS 规则：

.select2-container--default.select2-custom-focus .select2-selection {
  outline: none !important;
  box-shadow: 0 0 5px 2px lightblue !important;
  border-color: #80bdff !important;
}

2. 初始化 Select2 后绑定焦点事件：

$('.select2').select2() // 你原有的Select2初始化逻辑
  .on('focus', function() {
    $(this).data('select2').$container.addClass('select2-custom-focus');
  })
  .on('blur', function() {
    $(this).data('select2').$container.removeClass('select2-custom-focus');
  });

内容的提问来源于stack exchange，提问作者Abrar Mahi