Skip to main content

Keyboard Bindings

Almost all features provided by React Complex Tree are accessible by using keyboard interactions. Default bindings are provided by the framework, but can be customized via props on the tree environment by supplying a keyboardBindings prop to the environment, which implements the KeyboardBindings interface.

Default bindings


The default bindings are defined in the source code here.

InteractionDefault BindingBinding SymbolNote
Expand SiblingsCONTROL + *expandSiblingsNot yet implemented
Move focus to first item in treeHOMEmoveFocusToFirstItem
Move focus to last item in treeENDmoveFocusToLastItem
Execute primary action for selected itemsENTERprimaryActionCalls the onPrimaryAction hook provided to the environment.
Start renaming focused itemF2renameItemRenaming is completed by submitting the form, i.e. by pressing enter.
Abort renaming focused itemESCAPEabortRenameItemBlurring the input also aborts renaming.
Toggle the select-state of the focused itemCONTROL + SPACEtoggleSelectItem
Abort search and hide the search inputESCAPE or ENTERabortSearch
Bring up the search input and focus itNonestartSearchBy default, searching can be started by pressing any letter button.
Select all itemsCONTROL + AselectAll
Start keyboard-bound Drag-and-Drop sequenceCONTROL + DstartProgrammaticDnd
Complete keyboard-bound Drag-and-Drop sequenceENTERcompleteProgrammaticDnd
Abort keyboard-bound Drag-and-Drop sequenceESCAPEabortProgrammaticDnd

Keyboard-bound Drag-and-Drop sequences

Drag and Drop is also controllable via keyboard. This sequence can be started by pressing the hotkey startProgrammaticDnd which is CONTROL + D by default. Then, the user can press the up or down keys to select a target location. Moving the focus to a different tree with Tab is also possible. To complete the drop, the hotkey completeProgrammaticDnd (ENTER) needs to be pressed. The drag can also be aborted with the hotkey abortProgrammaticDnd (ESCAPE).

Programmatic interaction

Most features, like moving the focus or selecting items, can programmatically be controlled by pulling a React Ref either from the tree environment or the tree itself, and acting on the Ref object. Read the documentation on externally interacting with the tree via Refs to find out more.