Keyboard Navigation

The keyboard navigation of the MultiSelectTree is always available.

The MultiSelectTree supports the following keyboard shortcuts:

Closed state

The MultiSelectTree allows navigating through the opened and closed popup state when the focus is on the input.

SHORTCUTDESCRIPTION
Alt+Down ArrowOpens the popup.
Alt+Up ArrowCloses the popup.
EscCloses the popup.

Opened state

The MultiSelectTree allows navigating through the TreeView and other items when it's opened.

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
  • If the focus is on an open node, fires the onExpandChange event.
  • If the focus is on a child node, which is also closed or located in the end, moves the focus to its parent.
Right Arrow
  • If the focus is on a closed node, fires the onExpandChange event.
  • If 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 onChange event.

Tags Navigation

The MultiSelectTree allows navigating through the value tags when the focus is on the input.

SHORTCUTDESCRIPTION
Left ArrowFocuses the previous selected tag.
Right ArrowFocuses the next selected tag.
HomeFocuses the first selected tag.
EndFocuses the last selected tag.
DeleteDeletes the focused tag.
Example
View Source
Edit In Stackblitz  
Change Theme: