Kendo modal window not editable in Bootstrap 5

Question

I'm currently in the process of upgrading a .NET 6.0 Core web application from Bootstrap 4 to Bootstrap 5. However, I've encountered an unusual issue with the Kendo editor and any modal windows that it triggers. While the editor itself works fine, when I open modal windows such as the HTML view or insert hyperlink modals, the fields within them are unresponsive. They look correct, but they're not editable or selectable.

I've compared this behavior with the Bootstrap 4 version, and all the same classes are applied to the fields and modals in both versions. The Bootstrap 4 version functions as expected.

It's worth noting that I'm using the exact same version of Kendo for both versions, but I've switched to a different Kendo Bootstrap CSS file. I even tried using the old Bootstrap 4 version, and the issue persisted. The Kendo JavaScript files have remained unchanged.

I've updated the Bootstrap files and Popper to the new Bootstrap 5 versions, but jQuery has remained the same.

Any insights or solutions would be greatly appreciated.

More info: I have been diving much deeper into this issue as I need to get it resolved. The kendo editor is actually being shown inside of a bootstrap modal - this means that when opening the "view Html" or "Insert link" modals that there is a modal within a modal. The contents of the bootstrap modal are being loaded from a url and then displayed, this all works perfectly in BS4 using this code:

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

And the extra kendo modals work correctly.

If I swap to bootstrap 5 and use this code to open the modal things no longer work:

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();
        }
    });
}

The editor shows ok and works correctly with the exception that the extra modals for insert link and view html will not allow the input fields to be used (any buttons or checkboxes are ok).

Is this of any help?

Answer 1

For anyone looking at this and wondering what's going on. The fix is to modify the code that is showing the initial modal (the one that contains the editor) to set focus to false. Here's the code I am now using to show the modal:

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

Using this code the extra modals that are created by the Kendo editor work correctly.
Credit must go to this answer on SO: https://stackoverflow.com/a/77103794/5982955