Keyboard Navigation

The keyboard navigation of the DropDownList is always available.

The DropDownList supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Up Arrow & Left ArrowSelects the previous available item.
Down Arrow & Right ArrowSelects the next available item, unless filterable is enabled.
EnterSelects the highlighted item.
EscCloses the popup.
Alt+Down ArrowOpens the popup.
Alt+Up ArrowCloses the popup.
import React from 'react';
import ReactDOM from 'react-dom';

import { DropDownList } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    sizes = [ "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" ];

    render() {
        return (
            <div>
                <div>T-shirt size:</div>
                <DropDownList data={this.sizes} />
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);
In this article
 /