I use Dynatree to get a tree view and now I want to set the focus on an input field in the dynatree title element but the element loses the focus.
Unfortunately my code doesn't work. You can see it in a fiddle (http://jsfiddle.net/3nD7X/1/). When you click on the last level on the numbers in front of the text, then the input field appears, but the focus is set on the dynatree element. When I click on the input box the focus appears and then disappears again when my finger releases the mouse (mouse up).
$('#tree-team').on('click', '.seeding_list', function() {
var id = $(this).data('id');
$('#label_place_' + id).hide();
$('#input_place_' + id).show();
}).change(function() {
var id = $(this).data('id');
console.log("change seeding place");
});
$('#tree-team').on('mouseup', '.tree-editbox', function() {
return false;
});
$(document).mouseup(function() {
$('.tree-editbox').hide();
$('.tree-text').show();
});
I am not that familiar with Dynantree and perhaps this is crude, but what worked for me is replacing
$('#input_place_' + id).show().;
with
$('#input_place_' + id).blur(function(){$(this).focus()}).show().focus();
Handling .blur()
event prevents control from losing focus and using last .focus()
actually sets the focus