Kendo Editor + show("slide") is not editable in Firefox

Question

Please refer to JSFiddle for a working demonstration of this problem.

In Firefox (latest version, 24), if I use jQuery UI's .show("slide", { direction: "right" }) to display a kendoEditor, the editor does not contain the value I set it with, and it is not editable. If I use the plain old .show() from jQuery, then everything works fine. It also works fine in Chrome 30 and IE 10. Why does .show("slide") break the editor in Firefox, and are there any workarounds for this problem?

Html for this example:

<button id="btn1" type="button">Button 1</button>
<button id="btn2" type="button">Button 2</button>
<div id="div">
    <textarea data-role="editor" data-bind="value: TheValue"></textarea>
    <button id="hide" type="button">Hide</button>
</div>

This is the JS code that does not work:

$(document).ready(function () {
    var model;
    function bindDiv(value) {
        model = kendo.observable({ TheValue: value });
        kendo.bind($('#div'), model);
        $('#div').show("slide", { direction: "right" });
        //$('#div').show();
    }
    $('#div').hide();
    $('#btn1').click(function () { bindDiv('hello'); });
    $('#btn2').click(function () { bindDiv('goodbye'); });
    $('#hide').click(function () {
        console.log(model.get('TheValue'));
        $('#div').hide("slide", { direction: "right" });
        //$('#div').hide();
    });
});

Clicking btn1 should result in the editor being display with the text "hello", and then clicking "Hide" should display the edited text in the console. If you replace those two "slide" lines with the plain commented-out versions, then it works fine (but doesn't look as cool).

Does anyone know why this doesn't work, or what I can do about it?

Update:

Before the animation plays, everything is OK - the body of the editor's iframe has the correct content and is marked with the contenteditable attribute. After the animation completes, the body of the iframe is wiped clean - no content, no attributes. I'm still trying to figure out why and what to do about it.

Answer 1

If you upgrade your KenoUI version to the latest Q2 2013 (version 2013.2.716) then the Kendo Editor has a new method called: refresh which

refresh
Reinitializes the editing area iframe. Should be used after moving the editor in the DOM.

So it does exactly what you need, because the animation moves the editor iframe you need to call refresh when it finishes:

$('#div').show("slide", { direction: "right" }, function () {
    var editor = $("#editor").data("kendoEditor");
    editor.refresh();
});

To make this work you also need to change your view and give an id to you textarea:

<div id="div">
    <textarea id="editor" data-role="editor" data-bind="value: TheValue">
    </textarea>
</div>

Demo JSFiddle.

Answer 2

Ok, so, when slideeffect is occured, the iframe don't appear correctly...

The solution I find is to rebind the editor, in the end of slideeffect. But need to destroy it in hiding, else, some conflicts come.

jsfiddle : http://jsfiddle.net/xzftW/18/

code :

$(document).ready(function () {
    function bindDiv(value) {
       kendo.bind($('#div'), '');
        $('#div').show("slide", { direction: "right" }, function(){
            resetme();
            kendo.bind($('#div'), kendo.observable({ TheValue: value }));
                $('#hide').click(function() {hideme() } ); 
        });        
    }
    $('#div').hide();
    $('#btn1').click(function () { bindDiv('hello'); });
    $('#btn2').click(function () { bindDiv('goodbye'); });    
});


function hideme()
{
    $('#div').hide("slide", { direction: "right" }, function(){    
       resetme();
    });
 }

function resetme()
{
     $('#div').html('<textarea data-role="editor" data-bind="value: TheValue"></textarea><button id="hide" type="button">Hide</button>');

}