Adding, removing, adding editor -> all editors on page become read only in IE

[Martin]

Affected browsers (and perhaps more): IE9 on Windows 7, IE10 preview on Windows 7.

Do this:

1. You have a Kendo UI Editor on a page.
2. You add an additional editor on the same page.
3. Destroy the new editor.
4. You add an additional editor on the same page.
5. You try to write something in one of the editors in the page.

Expected result:
You can write stuff.

Actual result:
You cannot write stuff, as the text area in the editor cannot receive focus.

I have attached files reproducing the bug. Open the HTML document. Simply press the ADD button, the REMOVE button and the ADD button again to see the bug. Remember to use IE - it works fine in Chrome.

[Dimo]

Hello Martin,

IE has problems with focusing inside iframes when any container with an iframe is removed from the DOM. You need to remove the iframe itself and then the cotainer:

$("#removeEditor").click(function () {
    $("#sometimes").data('kendoEditor').wrapper.find("iframe").remove();
    $("#sometimes").data('kendoEditor').destroy();
    $("#cont").empty();
});

Regards,
Dimo
the Telerik team

[Martin]

Hello Dimo.
Thank you for the reply.
I have uploaded a new file containing the fix you mentioned. This fixes the issue for IE9 but there are still problems with IE10 on Windows 8 and IE10 Preview on Windows 7.

Do this:

1. Click in the white area the editor.
2. Type asdf into the editor.
3. Click ADD. This adds an additional editor.
4. Click in the white area in the second editor.
5. Type asdf into the second editor.
6. Click DELETE. This removes the second editor.
7. Click in the white area in the original editor.

Expected result:
The editor gets focus and you can type stuff into the editor.

Actual result:
The editor only gets focus sometimes. I have found that it gets focus about 1/3 of the time and no focus 2/3 of the time. (Pressing F5 between each try.) This is with IE10 preview on Windows 7. The results are similar on IE10 on Windows 8.

[Dimo]

Hi Martin,

Thank you for the runnable demo.

Based on our tests, our current assumption is that the observed behavior is caused by a browser bug. You can avoid it by focusing the first Editor before destroying the second one:

$("#removeEditor").click(function () {
    $("#always").data("kendoEditor").focus();
    $(document.body).focus();

    $("#sometimes").data('kendoEditor').wrapper.find("iframe").remove();
    $("#sometimes").data('kendoEditor').destroy();
    $("#cont").empty();
});

Regards,
Dimo
the Telerik team

[Martin]

Hi Dimo

That works, thank you. It turns out that the symptoms depend a lot on specifics of the page. Some pages work fine in IE, some require removal of the iframe, and others also require the focus trick.

It seems to me that it would be a good idea if the editor automatically did iframe removal when the user calls destroy(). Please consider including it in a later version.

- Martin

[Dimo]

Hi Martin,

We have already included frame removal in the Editor's destroy routine, unfortunately, as you see, it does not cover all scenarios, as in your case.

Regards,
Dimo
the Telerik team