如何从 Bootstrap 5 中的模态中删除 focusin 事件监听器

Question

我有一个带有模态的遗留应用程序，不幸的是它使用了kendo下拉列表元素（绑定到ajax调用并带有过滤等 - 如果我也没有，我不想重写它）。因此，当模式打开时，您将注意力集中在下拉列表上，模式会假设您在其外部单击，并将焦点从下拉列表上移开 - 促使它在您打开它后立即关闭...我已将其修复使用此代码的 Boostrap 4：

    $("#theModalId").on('shown.bs.modal',function () {
            $(document).off('focusin');
    })

但是这在 bootstrap 5 中不再起作用。我想可能是因为 focusin 事件可能不再在文档元素本身上？我可以看到 bootstrap 正在添加 focusin 事件 - 但我不知道它也添加了哪个元素，因为上面的代码不再起作用。我也尝试从 theModal 元素中删除它，但这也不起作用。

非常感谢任何帮助！

Answer 1

好的，所以我发现如果您从下拉列表中删除过滤器选项，它可以解决此问题，但您也可以使用常规选择。

或者您可以保留过滤器并通过应用本线程中一些 Levi 伙计提供的以下建议来解决问题：https://www.telerik.com/forums/dropdownlist-closes-when-setting-filter-option （谢谢利维） 似乎没有什么对我有用！这是李维斯的实现：

// Popup extension.
// Sets up kendo popups (used in all sorts of widgets) to check if the widget
// is being included in a bootstrap modal. If so, the popup should append to
// the modal instead of the page body.
//
// For the most part, popups work fine without this. However, DropdownList with
// a filter option does not. This is because the filter attempts to focus on
// filter input, which is outside the modal By default, Bootstrap modal will
// block this. It has an option to allow, but then it must be remembered to add
// everywhere.
//
// This allows filtered dropdownlists to 'just work'.
//
// http://www.telerik.com/forums/dropdownlist-closes-when-setting-filter-option
//
// See for alternate solutions:
// http://www.telerik.com/forums/dropdownlist-with-server-filtering-on-bootstrap-modal
// http://stackoverflow.com/a/28471072/246561
//
(function ($, kendo) {
 
    var
        _init = kendo.ui.Popup.fn.init;
 
    var Popup = kendo.ui.Popup.extend({
        init: function (element, options) {           
            // Only set appendTo if nothing was manually set in the options.
            if (options.appendTo === undefined) {
                // Find the nearest parent bootstrap modal, if any.
                var parentModal = $(options.anchor).closest('.modal');
 
                // Found one!
                if (parentModal.length > 0) {
                    options.appendTo = parentModal[0];
                }
            }
 
            // Call the base constructor.
            _init.call(this, element, options);
        }
    });
 
    kendo.ui.plugin(Popup);
}(window.kendo.jQuery, window.kendo));

Answer 2

我尝试了这个，它出乎意料地工作，无论哪个版本的引导程序：

document.removeEventListener('focusin', getEventListeners(document).focusin[0].listener)