fix(golden-layout): DH-22431: preserve focus indicator on nested dashboard tab (#2664)

- When a dashboard is nested inside another dashboard, focusin events
bubble from the inner content up to the outer container's
contentElement. The outer Tab's focusin handler would clear the inner
tab's lm_focusin class and claim focus for itself, leaving the active
tab indicator in the wrong place.
- _onTabContentFocusIn now ignores events whose target lives inside a
nested LayoutManager. _onTabClick treats focus inside a nested layout as
'not in this container' so clicking the outer tab properly transfers the
indicator back out.
- Tested with the following deeply nested layout:
```
from deephaven import ui

@ui.component
def deeply_nested_dashboard_component():
    """A dashboard nested inside a panel, which is inside another dashboard."""
    return ui.panel(
        ui.dashboard(
            ui.row(
                ui.panel(ui.text("Content Level 1"), title="Level 1"),
                ui.panel(
                    ui.dashboard(
                        ui.row(
                            ui.panel(ui.text("Content Level 2"), title="Level 2"),
                            ui.panel(ui.text("Deepest Content"), title="Deepest Panel"),
                        )
                    ),
                    title="Nested Dashboard Container",
                ),
            )
        ),
        title="Outer Dashboard",
    )
ui_deeply_nested_dashboard = deeply_nested_dashboard_component()
```

Author: mofojed

packages/golden-layout/src/__tests__/tab.test.ts

@@ -1,6 +1,53 @@
+import $ from 'jquery';
 import LayoutManager from '../LayoutManager';
-import { Stack } from '../items';
-import { createLayout, cleanupLayout } from '../test-utils/testUtils';
+import type { ItemContainer } from '../container';
+import { Component, Stack } from '../items';
+import {
+  createLayout,
+  cleanupLayout,
+  waitForLayoutInit,
+} from '../test-utils/testUtils';
+
+class FocusableComponent {
+  constructor(container: ItemContainer) {
+    container.getElement().html('<button type="button">focus target</button>');
+  }
+}
+
+class NestedDashboardComponent {
+  innerLayout: LayoutManager;
+
+  constructor(container: ItemContainer) {
+    const nestedHost = document.createElement('div');
+    nestedHost.style.width = '100%';
+    nestedHost.style.height = '100%';
+    container.getElement().append(nestedHost);
+
+    this.innerLayout = new LayoutManager(
+      {
+        content: [
+          {
+            type: 'stack',
+            content: [
+              {
+                type: 'component',
+                componentName: 'innerComponent',
+              },
+            ],
+          },
+        ],
+      },
+      nestedHost
+    );
+
+    this.innerLayout.registerComponent('innerComponent', FocusableComponent);
+    this.innerLayout.init();
+
+    container.on('destroy', () => {
+      this.innerLayout.destroy();
+    });
+  }
+}
 
 describe('tabs apply their configuration', () => {
   let layout: LayoutManager | null = null;
@@ -73,4 +120,59 @@ describe('tabs apply their configuration', () => {
       (header.tabs[1] as unknown as { _dragListener: unknown })._dragListener
     ).not.toBeDefined();
   });
+
+  it('keeps focus styling on the nested dashboard tab', async () => {
+    const container = document.createElement('div');
+    container.style.width = '800px';
+    container.style.height = '600px';
+    document.body.appendChild(container);
+
+    layout = new LayoutManager(
+      {
+        content: [
+          {
+            type: 'stack',
+            content: [
+              {
+                type: 'component',
+                componentName: 'nestedDashboard',
+              },
+            ],
+          },
+        ],
+      },
+      container
+    );
+
+    layout.registerComponent('nestedDashboard', NestedDashboardComponent);
+    layout.init();
+    await waitForLayoutInit(layout);
+
+    const outerStack = layout.root.contentItems[0] as Stack;
+    const outerTab = outerStack.header.tabs[0];
+    const nestedLayoutHost = outerStack.contentItems[0] as Component;
+    const nestedComponent =
+      nestedLayoutHost.instance as NestedDashboardComponent;
+    await waitForLayoutInit(nestedComponent.innerLayout);
+
+    const innerStack = nestedComponent.innerLayout.root
+      .contentItems[0] as Stack;
+    const innerTab = innerStack.header.tabs[0];
+    const innerComponent = innerStack.contentItems[0] as Component;
+    const focusTarget = innerComponent.container
+      .getElement()
+      .find('button')[0] as HTMLButtonElement;
+
+    focusTarget.focus();
+
+    expect(innerTab.element.hasClass('lm_focusin')).toBe(true);
+    expect(outerTab.element.hasClass('lm_focusin')).toBe(false);
+
+    // jsdom doesn't implement scrollIntoView, which Tab._onTabClick calls.
+    Element.prototype.scrollIntoView = jest.fn();
+    outerTab.element.trigger($.Event('click', { button: 0 }));
+
+    expect(outerTab.element.hasClass('lm_focusin')).toBe(true);
+    expect(innerTab.element.hasClass('lm_focusin')).toBe(false);
+  });
 });

packages/golden-layout/src/controls/Tab.ts

@@ -170,11 +170,6 @@ export default class Tab {
     this.closeElement.off('click', this._onCloseClick);
     if (isComponent(this.contentItem)) {
       this.contentItem.container._contentElement.off();
-      this.contentItem.container._contentElement[0].removeEventListener(
-        'click',
-        this._onTabContentFocusIn,
-        true
-      );
     }
     if (this._dragListener) {
       this.contentItem.off(
@@ -216,7 +211,20 @@ export default class Tab {
   /**
    * Callback when the contentItem is focused in
    */
-  _onTabContentFocusIn() {
+  _onTabContentFocusIn(event?: JQuery.TriggeredEvent) {
+    // If the focus originated from inside a nested LayoutManager (a
+    // dashboard within a dashboard), let that nested layout's tab own
+    // the focus indicator instead of this outer tab. The focusin event
+    // bubbles, so without this check the outer tab would clear the
+    // nested tab's "lm_focusin" class and claim focus for itself.
+    if (
+      isComponent(this.contentItem) &&
+      event?.target instanceof Element &&
+      this._isInNestedLayout(event.target)
+    ) {
+      return;
+    }
+
     // Ensure only one tab is marked as having focus at a time.
     // In Firefox, if the focused element is removed from the DOM,
     // the focusout event won't trigger. This can result in two tabs
@@ -265,12 +273,13 @@ export default class Tab {
         this.header.parent.setActiveContentItem(this.contentItem);
       } else if (
         isComponent(this.contentItem) &&
-        !this.contentItem.container._contentElement[0].contains(
-          document.activeElement
-        )
+        !this._isFocusDirectlyInContainer()
       ) {
         // if no focus inside put focus onto the container
-        // so focusin always fires for tabclicks
+        // so focusin always fires for tabclicks. Focus inside a nested
+        // LayoutManager is not considered "inside" this container so
+        // that clicking the outer tab transfers focus (and the
+        // lm_focusin indicator) to it.
         this.contentItem.container._contentElement.focus();
       }
 
@@ -330,4 +339,34 @@ export default class Tab {
   _onCloseMousedown(event: Event) {
     event.stopPropagation();
   }
+
+  /**
+   * Returns true if the given element is inside this content item's
+   * container but within a nested LayoutManager (i.e. a dashboard
+   * embedded inside this tab's component). Such focus belongs to the
+   * nested layout's tab, not this outer one.
+   */
+  private _isInNestedLayout(element: Element): boolean {
+    const nestedLayoutRoot = $(element).closest('.lm_goldenlayout')[0];
+    const ownLayoutRoot = this._layoutManager.root.element[0];
+    return nestedLayoutRoot != null && nestedLayoutRoot !== ownLayoutRoot;
+  }
+
+  /**
+   * Returns true if the document's active element is inside this tab's
+   * container directly (not inside a nested LayoutManager).
+   */
+  private _isFocusDirectlyInContainer(): boolean {
+    if (!isComponent(this.contentItem)) {
+      return false;
+    }
+    const active = document.activeElement;
+    if (
+      active == null ||
+      !this.contentItem.container._contentElement[0].contains(active)
+    ) {
+      return false;
+    }
+    return !this._isInNestedLayout(active);
+  }
 }