javascript - Kendo ComboBox inside a bootstrap dropdown

Question

I am trying to use a kendo combo-box inside a bootstrap dropdown.

I have created a sample fiddle..

http://jsfiddle.net/w32LvL18/3/

The problem is, when I try to type something in the combo-box, I could not browse to the other options using down arrow key. As soon as I try to use down arrow key, it jumps to dropdowns first option instead of combo-box options.. How can I change this...

 $('#keep_open_dropdown').on("click", function (e) {
            e.stopPropagation(); // This replace if conditional.
 }); 

Answer 1

One solution is simply remove the role="menu" attribute from the bootstrap dropdown and disable the keyboard navigation for the bootstrap dropdown.

<ul id="dropdown-items" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

Another solution, when you want to keep the keyboard navigation also for the bootrap Dropdown, is catching the open and close event and add or remove the role attribute.

Here is a updated fiddle.

...
close: function(){
    $('#dropdown-items').attr('role', 'menu');        
},
open: function(){
    $('#dropdown-items').removeAttr('role');  
},
....