Keyboard Navigation

The keyboard navigation of the AutoComplete is always available.

The AutoComplete supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
EscCloses the popup.
EnterSelects the highlighted item.
Down ArrowHighlights the previous item.
Up ArrowHighlights the next item.
import React from 'react';
import ReactDOM from 'react-dom';

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

class AppComponent extends React.Component {
    data = [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan" ];

    render() {
        return (
            <div className="example-wrapper">
                <p>Type the name of a European country:</p>
                <AutoComplete
                    data={this.data}
                    placeholder="e.g. Andorra"
                />
            </div>
        );
    }
}

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

In this article

 /