handlePaneContentPointerDown steals focus from slotted interactive elements (inputs, textareas, selects)

[Timmeeeey]

Description

After upgrading to v2.0.1, interactive elements (inputs, textareas, selects) placed inside slotted content panes cannot receive focus on click.

Root Cause

handlePaneContentPointerDown uses this.shadowRoot.activeElement to check whether focus is already inside the dock manager:

handlePaneContentPointerDown(pane) {
  requestAnimationFrame(() => {
    const rootNode = this.shadowRoot ?? document;
    if (this === rootNode.activeElement || !this.contains(rootNode.activeElement)) {
      this.setFocus(pane);
      this.contentPaneId = pane.contentId;
    }
  });
}

Slotted content lives in the light DOM, not the shadow tree. So shadowRoot.activeElement is always null for slotted elements, making !this.contains(null) evaluate to true. This causes setFocus(pane) to always fire, redirecting focus to the pane wrapper and stealing it from the input.

In contrast, handlePaneContentMouseDown uses this.getRootNode() (which returns the document), where document.activeElement correctly resolves to the focused light-DOM element. That handler works fine.

Steps to Reproduce

https://stackblitz.com/edit/9yl9lm4y

1. Create a dock manager with a content pane containing an <input> (or any focusable element) in slotted content
2. Click the input
3. The input briefly receives focus, then setFocus(pane) steals it in the next animation frame

Expected Behavior

Clicking an interactive element inside slotted content should allow it to receive and retain focus.

Suggested Fix

Use this.getRootNode() instead of this.shadowRoot in handlePaneContentPointerDown, matching the logic in handlePaneContentMouseDown:

const rootNode = this.getRootNode();

Environment

• igniteui-dockmanager: 2.0.1
• Browser: Chrome