Keyboard Navigation

react-tree-multi-select provides virtual focus system, enabling smooth keyboard navigation across all interactive elements.
Unlike traditional focus that depends on the browser’s active element, virtual focus is managed internally. This ensures predictable keyboard behavior, even when elements are hidden or virtualized.

The virtual keyboard navigation system supports moving focus between elements such as:

• Chips, Input and FieldClear inside the Field.
• SelectAll, Nodes and Footer inside the Dropdown (including virtualized content).

Navigation between these elements is controlled via arrow keys.

Virtual Focus Design

Every virtually focusable element is identified by an internal unique identifier — a VirtualFocusId.
These IDs are namespaced by region (field or dropdown) to avoid collisions.

field:<elementId> 
dropdown:<elementId>

This prefixing ensures IDs remain unique even when both regions contain elements with the same logical name.

Each virtual focusable element has the attribute data-rtms-virtual-focus-id.

You can exclude specific elements from the virtual focus system by passing the excludedVirtualFocusIds in the virtualFocusConfig prop.

Example — Excluding disabled nodes from dropdown virtual focus system:

Custom Keyboard Navigation

You can fully customize the keyboard navigation behavior of react-tree-multi-select using the onKeyDown callback in combination with the component’s imperative API.
To access the component API, pass a ref to the component and interact with it through the exposed TreeMultiSelectHandle.
This approach allows you to:

• Intercept specific keyboard events.
• Override or extend the default keyboard behavior.
• Implement entirely custom navigation logic if needed.

On the example below, you can see a reimplementation of the component’s internal keyboard navigation using the onKeyDown callback and the imperative API exposed via the component ref.
This demonstrates how flexible the keyboard navigation system is, enabling advanced behaviors to be implemented entirely through the component’s public API.