Bootstrap 5升级后Kendo编辑器嵌套模态框输入框不可编辑问题

问题根源分析 #

1. Bootstrap 5焦点管理变化：Bootstrap 5默认会将焦点锁定在当前激活的模态框内，Kendo编辑器弹出的子模态框（插入链接、HTML视图等）未被Bootstrap的焦点机制正确识别，导致输入字段无法获取焦点。
2. 层级冲突：Bootstrap 5模态框默认z-index为1055，Kendo子模态框的默认层级可能低于该值，被父模态框遮挡，无法交互。
3. backdrop: static的影响：该设置强化了模态框的锁定机制，进一步阻碍了子模态框的焦点传递。

解决方案 #

方案1：关闭Bootstrap模态框的焦点锁定

修改Bootstrap 5模态框初始化代码，添加focus: false选项，禁用自动焦点锁定：

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

方案2：调整Kendo模态框的层级

在全局CSS中提高Kendo模态框及遮罩层的z-index，确保其优先级高于Bootstrap模态框：

.k-window {
    z-index: 1065 !important; /* 高于Bootstrap 5模态框默认的1055 */
}
.k-overlay {
    z-index: 1064 !important;
}

方案3：手动设置子模态框焦点

监听Kendo编辑器的子模态框打开事件，手动将焦点定位到输入字段：

// 初始化Kendo编辑器时绑定事件
$("#your-editor-id").kendoEditor({
    open: function() {
        // 延迟执行确保模态框已渲染完成
        setTimeout(() => {
            $(".k-window-content input, .k-window-content textarea").first().focus();
        }, 100);
    }
});

方案4：避免嵌套模态框（可选）

若业务场景允许，将Kendo编辑器移出Bootstrap模态框，直接放在页面容器中，从根源上避免层级和焦点冲突。

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