🔀 Multiple Focus Modes Demo - Radix Tree

⚙️ Multiple Focus Modes Configuration
Combine multiple focus modes for enhanced user experience. Select multiple modes below to see how they work together. Try the "Highlight + Accordion" combination to see the fixed behavior!

Select Focus Modes (Multiple Selection):

🎯 Test Instructions:

  • Highlight + Accordion: Expand a parent node, then expand different children - each should be highlighted when opened
  • All Modes: Maximum control with visual feedback, accordion behavior, and auto-scroll
  • Single Modes: Test individual behaviors

🔧 Active Modes:

None selected

🔀 Multiple Mode Support

Combine any focus modes together for custom behavior. Each mode's effects are applied in sequence.

🎯 Highlight + Accordion

Visual focus with accordion behavior - only one node open per level with highlighting.

📁 Collapse + Scroll

Collapse siblings and auto-scroll to the focused node for clean navigation.

⚡ All Modes Combined

Maximum control: accordion, highlight, collapse siblings, and auto-scroll all working together.

💡 Popular Combinations

Recommended Mode Combinations:

  • Highlight + Accordion: Visual focus with single-node-per-level behavior
  • Highlight + Scroll: Visual focus with smooth auto-scrolling
  • Collapse Siblings + Scroll: Clean tree with auto-scroll to focused node
  • All Modes: Maximum control and visual feedback
📝 Code Examples
// Single Mode (Default) focusMode: { enabled: true, type: 'highlight' } // Multiple Modes (New!) focusMode: { enabled: true, type: ['highlight', 'accordion'] // Apply both modes } // All Modes Combined focusMode: { enabled: true, type: ['highlight', 'accordion', 'collapse-siblings', 'scroll'] } // Dynamic Mode Selection const selectedModes = ['highlight', 'accordion']; focusMode: { enabled: true, type: selectedModes }