Jstree rename issue. inline editor opens above root node - asp.net

Question

Folks I am having an issue with rename and JsTree. I have created a JS Fiddle to highlight the issue. http://jsfiddle.net/KJYrs/. My scenario is that I'd like to validate that the entered name is not a default name or contains special characters. When I try to fire the rename event after the initial failed attempt the inline editor appears above the root node.
<script type="text/javascript" class="source">
$(function () {
$("#demo1").jstree({
"plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"]
}).bind("rename.jstree", function (event, data) {
//let's assume I do some vaidation here and it fails
//so I want to rename until valid
if (event.type === 'rename') {
$("#demo1").jstree("deselect_all");
$("#demo1").jstree("select_node", "#" + data.rslt.obj[0].id);
$("#demo1").jstree("rename");
}
});
});
</script>
<div id="demo1" class="demo">
<ul>
<li id="phtml_1"> Root node 1
<ul>
<li id="phtml_2"> Child node 1
</li>
<li id="phtml_3"> Child node 2
</li>
</ul>
</li>
<li id="phtml_4"> Root node 2
</li>
</ul>
</div>
Any help or suggestions would be greatly appreciated.

Answer 1

The issue appears because you call the rename, inside the rename - is not crash, but creates other problems. A simple solution is to call after the rename ends, using the setTimeout as:
$(function () {
$("#demo1").jstree({
"plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"]
}).bind("rename.jstree", function (event, data) {
//let's assume I do some vaidation here and it fails
//so I want to rename until valid
if (event.type === 'rename')
{
setTimeout(function(){
$("#demo1").jstree("deselect_all");
$("#demo1").jstree("select_node", "#" + data.rslt.obj[0].id);
$("#demo1").jstree("rename");
},100);
}
});
});
And the results:
http://jsfiddle.net/KJYrs/1/
Now you have other problems that you need to solve, a cancel of the rename, and to disable the menu until this ends.