Keyboard Navigation

The keyboard navigation of the TreeView is always available.

The TreeView supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Up ArrowMoves the focus to the previous focusable node without opening or closing a node.
Down ArrowMoves the focus to the next focusable node without opening or closing a node.
Left Arrow
  • When the focus is on an open node, fires the onExpandChange event.
  • When the focus is on a child node, which is also closed or located in the end, moves the focus to its parent.
Right Arrow
  • When the focus is on a closed node, fires the onExpandChange event.
  • When the focus is on an open node, moves the focus to the first child node.
HomeMoves the focus to the first node in the tree without opening or closing a node.
EndMoves the focus to the last focusable node in the tree without opening or closing a node.
EnterFires the onItemClick event.
SpaceIf the checkboxes property is configured, fires the onCheckChange event.
const tree = [{
    text: 'Furniture', expanded: true, items: [
        { text: 'Tables & Chairs' }, { text: 'Sofas' }, { text: 'Occasional Furniture' }]
}, {
    text: 'Decor', items: [
        { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' }]
}];

class App extends React.Component {
    render() {
        return (
            <TreeView
                data={tree}
                expandIcons={true} onExpandChange={this.onExpandChange}
                aria-multiselectable={true} onItemClick={this.onItemClick}
                checkboxes={true} onCheckChange={this.onCheckChange}
            />
        );
    }
    onItemClick = (event) => {
        event.item.selected = !event.item.selected;
        this.forceUpdate();
    }
    onExpandChange = (event) => {
        event.item.expanded = !event.item.expanded;
        this.forceUpdate();
    }
    onCheckChange = (event) => {
        event.item.checked = !event.item.checked;
        this.forceUpdate();
    }
}

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

In this article

 /