在 Bootstrap Modal 中使用 Select2 搜素功能失效的解决方案

当在 Bootstrap 的 Modal 中使用 Select2 插件时，可能会遇到输入搜索框无法使用的问题。这通常是由于 Bootstrap Modal 的焦点管理机制与 Select2 的下拉菜单冲突所导致的。

本文将介绍这个问题的原因以及如何通过简单的设置解决问题。

问题描述

在 Bootstrap Modal 中使用 Select2 时，点击 Select2 下拉菜单后，搜索输入框会失去焦点，甚至直接触发 Modal 的关闭按钮。这使得 Select2 的输入搜索功能无法正常使用。

问题原因

Bootstrap Modal 默认会强制将焦点保持在 Modal 内部的元素上（_enforceFocus 方法），而 Select2 的下拉菜单并非 Modal 的子元素，因此焦点会被强制移出。

解决方案

通过以下两步解决问题：

1. 为 Modal 添加 tabindex="-1" 属性
   • 这是 Bootstrap Modal 的推荐配置，确保 Modal 可以正确捕获焦点事件。
2. 为 Select2 设置 data-dropdown-parent 属性
   • 使用 data-dropdown-parent 将 Select2 的下拉菜单限制在 Modal 内。

完整代码示例

以下是一个完整的实现代码：

HTML 部分

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Select2 in Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <label for="select2-example" class="form-label">Select2 Example</label>
          <select id="select2-example" class="form-control" name="example" data-dropdown-parent="#exampleModal">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Trigger Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Open Modal
</button>

JavaScript 部分

$(document).ready(function () {
  // 初始化 Select2
  $('#select2-example').select2({
    placeholder: 'Please select an option',
    allowClear: true
  });
});

关键点解析

1. Modal 的 tabindex="-1"

为 Modal 添加 tabindex="-1" 确保其可以正确接收焦点管理：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

2. Select2 的 data-dropdown-parent 属性

通过为 Select2 配置 data-dropdown-parent，将下拉菜单的 DOM 限制在 Modal 内部，避免焦点冲突。

<select id="select2-example" class="form-control" name="example" data-dropdown-parent="#exampleModal">

总结

通过简单地为 Modal 添加 tabindex="-1" 和为 Select2 配置 data-dropdown-parent 属性，可以完美解决在 Bootstrap Modal 中使用 Select2 的焦点冲突问题。这种方式无需复杂的代码修改，同时保持了组件的功能和用户体验。