Trouble filling in input field with text on tab

2 posts, 0 answers
  1. Peter
    Peter avatar
    4 posts
    Member since:
    Mar 2015

    Posted 16 Mar 2015 Link to this post

    I'm trying to use a "tab" to grab the currently highlighted item in the dropdown and populate it into the the text field. However, I'm having 2 separate problems with this.

    The first is that I cannot get the "tab" key's default action to stop from firing. I have tried capturing the keydown even from my MultiSelect box's input field using the following code:

    $("#myInput").data().kendoMultiSelect.input.on("keydown",function(event) {
            var code = event.keyCode;
            if (code == 9) { //9 is the keyCode for Tab

    Using this code, the focus is still moved from the input to the next item on the page and is not giving me the desired functionality of doing nothing when tab is pressed.

    My next problem is the fact that I cannot find how kendo determines which item in the list of filtered items is highlighted. I don't see any properties being set when you use the arrow keys to highlight the input you want from that list. I would like to get the displayed text inside that highlighted item and populate it into the text input area when I press tab. Currently I cannot figure out how to figure out how to get the item without selecting it with a click or hitting enter while it is highlighted.

    Help with either or both of these would be extremely appreciated.
  2. Georgi Krustev
    Georgi Krustev avatar
    3688 posts

    Posted 18 Mar 2015 Link to this post

    Hello Peter,

    wiring the keydown event is the correct way to go. You will need, however, to prevent the default behavior and stop event propagation. Here is a Dojo demo that demonstrates this approach. It also uses the current method to get the active element. 

    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top