Keyboard Navigation

The keyboard navigation of the DropDownList is always available.

The DropDownList supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Up Arrow & Left Arrow Selects the previous available item.
Down Arrow & Right Arrow Selects the next available item, unless filterable is enabled.
Enter Selects the highlighted item.
Esc Closes the popup.
Alt+Down Arrow Opens the popup.
Alt+Up Arrow Closes the popup.
<div id="vueapp" class="vue-app">
    <div>
        <div>T-shirt size:</div>
        <dropdownlist :data-items='sizes' ></dropdownlist>
    </div>
</div>
import { DropDownList } from '@progress/kendo-vue-dropdowns';
Vue.component('dropdownlist', DropDownList);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            sizes: [ "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" ],
        };
    }
});

In this article