In a Kendo ComboBox, how do I make an input element gain focus?

Question

I'm trying to give focus to the input element of an item in the drop down list when the corresponding rename button is clicked. I've tried the jQuery .focus() function but the combobox simply closes without actually giving focus to the text input box.

I'm starting to wonder if it's even possible to allow the user to type into a text input box in this scenario.

I appreciate any help you can provide!

Code here: http://jsfiddle.net/MattDietrich/DfxBD/

$('.licenseHoverButton.rename').on('click', function(e) {
    e.stopPropagation(); // prevents combobox from closing
    var input_elem = $(this).siblings('.licenseName');   
    alert('Rename: ' + input_elem.val());

    /*
    Make input_elem have focus so that the user can type a new name. 
    The combobox must remain open.

    ie. input_elem.focus();    
    */
});

EDIT: A Clarifying Example

Here's a Fiddle that demonstrates my problem by contrasting with a checkbox: http://jsfiddle.net/MattDietrich/cWLQy/

• Notice how you can freely check/uncheck the checkbox but you can't edit the text boxes.

How can I give focus to (and edit) the text boxes?

Answer 1

According to a Telerik support admin, this is not currently supported. I'll update this answer if/when I hear that the issue has been fixed.

Answer 2

This behavior is not currently supported, BUT according to my experience of working with Telerik controls there are dozens of things that are not supported but very needfull. As a rule wanted behavior can be achieved by various of tricks and hacks, and this case is not an exception.

I wrote common fix, that enables focusing any elements within:

var _ignoreClose = false;
var funcClose = combobox.close;
combobox.close = function(){
    if (_ignoreClose) return;
    funcClose.call(combobox);
};
combobox.input.focusout(function(){
    _ignoreClose = true;
    setTimeout(function(){
        _ignoreClose = false;
    });
});
// set our handler as most priority
var evt = $._data(combobox.input[0]).events['focusout'];
evt.splice(evt.delegateCount, 0, evt.pop());

Also, if you want to make elements within clickable:

combobox.list.off('mousedown');

Updated Fiddle: http://jsfiddle.net/8zuygey4/1/