Headless Tree provides its own implementation of keybindings that can be customized and extended.

Further down on this page, you can find a list of all available hotkeys. Note that the availability of hotkeys depends on the features that are included. For any hotkey to work, the hotkeysCoreFeature must be included. This enables some basic tree-related hotkeys like moving focus with arrow keys. Other feature-specific hotkeys, like toggling selection or renaming an item, need both the hotkeysCoreFeature and the feature that implements the functionality, such as the selectionFeature or the renamingFeature.

The type of a hotkey implementation is shown below. Read on to see how you can customize existing hotkeys with this type or add your own.

export interface HotkeyConfig<T> {
  hotkey: string;
  canRepeat?: boolean;
  allowWhenInputFocused?: boolean;
  isEnabled?: (tree: TreeInstance<T>) => boolean;
  preventDefault?: boolean;
  handler: (e: KeyboardEvent, tree: TreeInstance<T>) => void;
}

Overwriting Hotkeys

You can pass an object of partial hotkey implementations in the hotkeys config property to your tree. Default hotkeys and your custom hotkeys will be merged together during runtime, with your custom hotkeys overwriting the default hotkeys. This allows you to overwrite the keybindings, parts of the behavior (like being able to repeat pressing the key) certain hotkeys or overwriting their implementation.

Use the tables at the bottom of the page for reference of the hotkey names.

Adding custom Hotkeys

You can also very easily add custom hotkeys, with arbitrary keybindings and implementations. While you can technically use any names for the hotkeys, the TypeScript type is implemented to only support the official hotkey names and any names that are prefixed with custom to avoid mistakes.

Available Hotkeys

General Hotkeys

The following hotkeys need the hotkeysCoreFeature feature added.

Key	Default Keybinding	Description
focusNextItem	ArrowDown	Focuses the next item in the list.
focusPreviousItem	ArrowUp	Focuses the previous item in the list.
expandOrDown	ArrowRight	Expands the focused item if it is collapsed. If the focused item is already expanded, focuses the next item in the list.
collapseOrUp	ArrowLeft	Collapses the focused item if it is expanded. If the focused item is already collapsed, focuses the previous item in the list.
focusFirstItem	Home	Focuses the first item in the list.
focusLastItem	End	Focuses the last item in the list.

Selections

The following hotkeys need the hotkeysCoreFeature and selectionFeature features added.

Key	Default Keybinding	Description
toggleSelectedItem	Ctrl+Space	Toggles the selection of the focused item.
selectUpwards	Shift+ArrowUp	Expands the current selection by the item prior to the focused item, and moves focus upwards. Discards non-connected selection blocks.
selectDownwards	Shift+ArrowDown	Expands the current selection by the item after the focused item, and moves focus downwards. Discards non-connected selection blocks.
selectUpwardsCtrl	Ctrl+Shift+ArrowUp	Same as selectUpwards, but doesn't discard other selection blocks.
selectDownwardsCtrl	Ctrl+Shift+ArrowDown	Same as selectDownwards, but doesn't discard other selection blocks.
selectAll	Ctrl+A	Selects all items in the list.

Drag And Drop

The following hotkeys need the hotkeysCoreFeature and dragAndDropFeature features added.

DnD Keybindings aren't implemented yet (TODO).

Search

The following hotkeys need the hotkeysCoreFeature and searchFeature features added.

Key	Default Keybinding	Description
openSearch	LetterOrNumber	Opens the search input and focuses it.
closeSearch	Escape	Closes the search input.
submitSearch	Enter	Submits the search input, and focuses and selects the last selected search result item.
nextSearchItem	ArrowDown	Focuses the next search result item.
previousSearchItem	ArrowUp	Focuses the previous search result item.

Renaming

The following hotkeys need the hotkeysCoreFeature and renamingFeature features added.

Key	Default Keybinding	Description
renameItem	F2	Starts renaming the focused item.
abortRename	Escape	Close the rename input.
completeRenaming	Enter	Close the rename input, and call the config.onRename(item, newNameValue) config property.

Expand All

The following hotkeys need the hotkeysCoreFeature and expandAllFeature features added.

TODO not implemented yet.