模式搜索框中的 select2 无法像禁用一样工作

Question

我有一个模态，它有一个 select2 组件，但它没有按预期工作，搜索框就像被禁用了

<div class="modal fade" id="m_modal_1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

这是我的模态代码

$('#m_modal_1').on('shown.bs.modal', function () {
           
            $('#id_golongan').select2({
                placeholder: "Pilih Golongan"
            })
        });

这是我的JS

我已经摆脱了

tabindex="-1"

并使用了

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

但不起作用，如果我使用

dropdownParent: $("#modal_penguasaan")

当我点击

时模态消失

我该怎么做才能使当我单击 select2 时模式不会消失并且搜索框正常工作

Answer 1

这就是我解决问题的方法；而不是在模式中删除 tabindex="-1"：

我编写了以下代码，它适用于 Bootstrap 版本 >5.2：

$(document).ready(function () {
  $.fn.modal.Constructor.prototype.enforceFocus = function () {};
  $("#single-select-field").select2({
    theme: "bootstrap-5",
    placeholder: "Select a category",
    allowClear: true,
    dropdownParent: $("#addModal") //ID of the Modal,
  });
});