Keyboard Navigation

The keyboard navigation of the ComboBox is always available.

The ComboBox supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Up ArrowSelects the previous available item.
Down ArrowSelects the next available item.
EnterSelects the highlighted item or submits a custom value.
EscCloses the popup.
Alt+Down ArrowOpens the popup.
Alt+Up ArrowCloses the popup.
import React from 'react';
import ReactDOM from 'react-dom';

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

class AppComponent extends React.Component {
    sports = [ "Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball" ];

    render() {
        return (
            <div className="example-wrapper">
                <p>Favorite sport:</p>
                <ComboBox
                    data={this.sports}
                    allowCustom={true}
                />
            </div>
        );
    }
}

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

In this article

 /