Kendo 模式窗口在 Bootstrap 5 中不可编辑

Question

我目前正在将

.NET 6.0 Core web

应用程序从

Bootstrap 4

升级到

Bootstrap 5

。但是，我在 Kendo 编辑器及其触发的任何模式窗口中遇到了一个不寻常的问题。虽然编辑器本身工作正常，但当我打开模式窗口（例如 HTML 视图）或插入超链接模式时，其中的字段没有响应。它们看起来正确，但不可编辑或选择。

我将此行为与

Bootstrap 4

版本进行了比较，所有相同的类都应用于两个版本中的字段和模态。

Bootstrap 4

版本按预期运行。

值得注意的是，我在两个版本中使用完全相同版本的 Kendo，但我已切换到不同的

Kendo Bootstrap CSS

文件。我什至尝试使用旧的

Bootstrap 4

版本，但问题仍然存在。

Kendo JavaScript

文件保持不变。

我已将 Bootstrap 文件和 Popper 更新为新的

Bootstrap 5

版本，但 jQuery 保持不变。

任何见解或解决方案将不胜感激。

更多信息： 我一直在更深入地研究这个问题，因为我需要解决它。剑道编辑器实际上显示在引导模式内部 - 这意味着当打开“查看 Html”或“插入链接”模式时，模式中存在一个模式。 引导模式的内容从 url 加载然后显示，这一切在 BS4 中使用以下代码完美运行：

function loadBS4ModalContent() {
$('#myModalContent').load("/Enrol/Utility/GetBS4EditorTestModalContent", function (response, status, xhr) {
        if (status != "error") {
            $('#myModal').modal({
                keyboard: true
            }, 'show');
        }
    });
}

额外的剑道模式可以正常工作。

如果我切换到 bootstrap 5 并使用此代码打开模式，则不再起作用：

function loadBS5ModalContent() {
    $('#myModalContent').load("/Enrol/Utility/GetBS5EditorTestModalContent", function (response, status, xhr) {
        if (status != "error") {
            const myModal = new bootstrap.Modal('#myModal', {
                keyboard: true,
                backdrop: 'static'
            });
            myModal.show();
        }
    });
}

编辑器显示正常并正常工作，但插入链接和查看 html 的额外模式不允许使用输入字段（任何按钮或复选框都可以）。

这有什么帮助吗？

Answer 1

对于任何看到这个并想知道发生了什么的人。修复方法是修改显示初始模式（包含编辑器的模式）的代码以将焦点设置为 false。这是我现在用来显示模式的代码：

const myModal = new bootstrap.Modal('#myModal', {
    keyboard: true,
    backdrop: 'static',
    focus: false
});
myModal.show();

使用此代码，Kendo 编辑器创建的额外模态可以正常工作。
信用必须归于这个答案：https://stackoverflow.com/a/77103794/5982955