Bootstrap5环境下Select2下拉搜索输入框无法点击问题

问题核心 #

• 故障表现：模态框中加载的Select2组件下拉展开后，内置搜索输入框无法点击、无法聚焦输入
• 版本差异：该兼容问题在Bootstrap3/4中诱因多为z-index层级冲突，Bootstrap5因组件重构，旧修复方案完全不适用
• 已验证无效的旧方案：
  • 调整DOM元素z-index属性
  • 添加Bootstrap4专属焦点修复代码$.fn.modal.Constructor.prototype.enforceFocus = function() {};
  • Select2初始化配置dropdownParent指向当前模态框
  • 零散修改CSS规则

上述旧方案无效的核心原因：Bootstrap5已经完全移除了jQuery依赖的组件构造逻辑，$.fn.modal.Constructor对象在Bootstrap5环境中不存在，对应的焦点拦截代码根本不会被覆写；同时Bootstrap5新增了原生JS实现的焦点锁机制，默认只允许焦点停留在模态框原生节点内，Select2动态渲染的搜索输入框不在焦点白名单中，点击时会被模态框强制截获焦点。

可直接生效的修复方案 #

方案1：原生JS覆写Bootstrap5焦点锁逻辑（推荐，无样式副作用） #

在Select2初始化代码前添加如下逻辑，放行Select2容器内元素的焦点权限：

document.addEventListener('show.bs.modal', function (modalEvent) {
  const currentModal = modalEvent.target;
  // 监听全局焦点事件，放行Select2容器内元素
  document.addEventListener('focusin', function (focusEvent) {
    if (
      currentModal.contains(focusEvent.target) || 
      focusEvent.target.closest('.select2-container')
    ) {
      return;
    }
    currentModal.focus();
    focusEvent.preventDefault();
  });
});

该方案不需要修改现有Select2初始化配置，也不会影响模态框原有焦点锁的无障碍访问特性。

方案2：CSS样式修复（适合不想修改JS逻辑的场景） #

添加如下全局CSS规则，从层级和事件响应层面绕过模态框拦截：

/* 提升Select2容器层级，高于Bootstrap5模态框默认z-index(1055) */
.select2-container {
  z-index: 1080 !important;
}
/* 确保搜索框可响应鼠标事件 */
.select2-search__field {
  pointer-events: auto !important;
  z-index: 1081 !important;
}
/* 如果配置了dropdownParent挂载到模态框内，需要取消模态框内容裁切 */
.modal-content {
  overflow: visible !important;
}

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