Keyboard Navigation

The keyboard support of the ComboBox is always available.

To apply the keyboard shortcuts, focus the ComboBox by clicking the example area and pressing the Tab key.

The ComboBox, its button, and drop-down elements support the following keyboard shortcuts:

SHORTCUT DESCRIPTION
 Up Arrow  Highlights the previous item.
 Down Arrow Highlights the next item.
 Home  Highlights the first item.
 End  Highlights the last item.
 Page Up  Scrolls the popup up.
 Page Down  Scrolls the popup down.
 Enter  Selects the highlighted item.
 Esc 
  • Closes the popup.
  • Clears the value if the popup is not opened.
 Alt+Down Arrow  Opens the popup.
 Alt+Up Arrow  Closes the popup.
<div id="vueapp" class="vue-app">
    <kendo-combobox :data-source="dataSourceArray"
                    :data-text-field="'text'"
                    :data-value-field="'value'">
    </kendo-combobox>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            dataSourceArray: [
                { text: 'Albania', value: 1 },
                { text: 'Armenia', value: 2 },
                { text: 'Austria', value: 3 },
                { text: 'Azerbaijan', value: 4 },
                { text: 'Belarus', value: 5 },
                { text: 'Belgium', value: 6 },
                { text: 'Bosnia & Herzegovina', value: 7 },
                { text: 'Croatia', value: 8 },
                { text: 'Cyprus', value: 9 },
                { text: 'Czech Republic', value: 10 },
                { text: 'Denmark', value: 11 },
                { text: 'Estonia', value: 12 },
                { text: 'Finland', value: 13 },
                { text: 'France', value: 14 },
                { text: 'Georgia', value: 15 },
                { text: 'Germany', value: 16 },
                { text: 'Greece', value: 17 }
            ]
        }
    }
})

In this article