模态框中使用Select2无法在搜索框输入文本问题求助

针对你遇到的Select2在模态框下拉列表中搜索框无法输入的问题，以下是几个可行的解决方案：

1. 修复Bootstrap模态框的焦点劫持 #

Bootstrap模态框默认会拦截focusin事件，导致Select2的搜索框无法获取焦点。可以在模态框显示后移除这个事件监听：

$('#mappingModal').on('shown.bs.modal', function () {
  // 移除模态框的焦点拦截
  $(document).off('focusin.modal');
});

2. 延迟初始化Select2到模态框渲染完成后 #

确保Select2在模态框完全显示后再初始化，避免DOM未加载完成导致的绑定问题：

$('#mappingModal').on('shown.bs.modal', function () {
  $('#branch').select2({
    dropdownParent: $("#mappingModal"), 
    placeholder: "Pilih Cabang / POS"
  });
});

3. 检查并移除不必要的disabled类 #

你的<select>元素带有disabled类，虽然Select2会处理禁用状态，但可能干扰交互逻辑。如果不需要禁用该控件，直接移除disabled类：

<select class="form-select required" data-width="100%" id="branch" name="branch" style="font-size: 14px;">
  <!-- 选项内容 -->
</select>

4. 调整Select2搜索框的层级 #

如果搜索框被模态框元素遮挡，添加CSS提升其层级：

.select2-search__field {
  z-index: 99999 !important;
}

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