Keyboard Navigation

The keyboard navigation of the MultiSelect is always available.

The MultiSelect supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Up ArrowFocuses the previous available item.
Down ArrowFocuses the next available item.
HomeFocuses the first selected tag.
EndFocuses the last selected tag.
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 { MultiSelect } from '@progress/kendo-react-dropdowns';

const sizes = [ "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" ];

class AppComponent extends React.Component {
    state = { value: [] };

    handleChange = (event) => {
        this.setState({
            value: event.target.value
        });
    }

    render() {
        return (
            <div>
                <div>T-shirt sizes:</div>
                <MultiSelect
                    data={sizes}
                    value={this.state.value}
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}

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

In this article

 /