Parent App Focus Management

Overview

Managing focus between your application and the SDK is critical for a good user experience, especially for keyboard navigation in BBD applications. This guide explains how to implement proper focus management in your parent application.

Focus Navigation Patterns

Transferring Focus to the SDK

When the user navigates to the panel, transfer focus to the SDK:

// Example of transferring focus to the SDK
<button
  className="button"
  id="toggle-tools"
  onKeyDown={eventHandler({
    onRight: (event) => {
      if (isShowingPanel) {
        // Blur the current element
        (event.target as HTMLElement).blur();
        
        // Transfer focus to the SDK
        vm.eventDriver.startFocusManagement();
      }
    },
    onBottom: focusLiveButton,
    onLeft: focusPanel,
  })}
>
  Tools
</button>

Receiving Focus from the SDK

Implement the startFocusManagement method in your event delegate:

class MyEventDelegate implements IMaestroEventDelegate {
  // Other methods...
  
  startFocusManagement(): Promise<void> {
    // Focus an appropriate element in your app
    const toggleEvent = document.getElementById("toggle-event");
    if (toggleEvent) {
      (toggleEvent as HTMLElement).focus();
    }
    return Promise.resolve();
  }
}

Component Integration

In a component-based architecture (React/Preact), bind the focus management to your component lifecycle:

// Using the event handler in component
<button
  id="live-button"
  disabled={vm.maestroEventDelegate.live.value}
  onKeyDown={eventHandler({
    onEnter: goLive,
    onTop: focusEvent,
    onRight: (event) => {
      if (isShowingPanel) {
        (event.target as HTMLElement).blur();
        vm.eventDriver.startFocusManagement();
      }
    },
  })}
>
  {live ? "You're Live " : "Go Live"}
</button>