Skip to content

Fix checkOutputInputFocus to support Shadow DOM traversal in notebook outputs #259592

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Aug 4, 2025

fix microsoft/vscode-jupyter#16660

The checkOutputInputFocus function in notebook webview preloads was unable to correctly detect focused input elements within Shadow DOMs. When an input element inside a shadow root receives focus, document.activeElement only returns the shadow host element, not the actual focused element within the shadow DOM.

This caused issues with notebook outputs that render content inside shadow roots, where focus detection for input elements would fail, preventing proper input focus state tracking.

Changes

Enhanced the checkOutputInputFocus function to traverse shadow DOM boundaries:

// Before
const activeElement = window.document.activeElement;
if (!activeElement) {
    return;
}

// After  
let activeElement = window.document.activeElement;
if (!activeElement) {
    return;
}

// Check for shadow root
if (activeElement.shadowRoot) {
    activeElement = activeElement.shadowRoot.activeElement;
}

if (!activeElement) {
    return;
}

The implementation:

  1. Changes activeElement from const to let to allow reassignment
  2. Checks if the active element has a shadow root
  3. If so, gets the actual focused element from within the shadow DOM
  4. Includes proper null safety for cases where shadow root exists but no element is focused within

This follows the same pattern used elsewhere in the codebase for shadow DOM traversal and ensures accurate focus detection for inputs encapsulated in shadow roots.

Fixes focus detection for notebook output cells that use shadow DOM for rendering, improving the overall user experience when interacting with complex notebook outputs.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

  • electronjs.org
    • Triggering command: node-gyp (dns block)

If you need me to access, download, or install something from one of these locations, you can either:


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

@Copilot Copilot AI changed the title [WIP] Enhancing checkOutputInputFocus to Support Shadow DOM Traversal Fix checkOutputInputFocus to support Shadow DOM traversal in notebook outputs Aug 4, 2025
@Copilot Copilot AI requested a review from amunger August 4, 2025 16:06
Copilot finished work on behalf of amunger August 4, 2025 16:06
@@ -196,7 +196,16 @@ async function webviewPreloads(ctx: PreloadContext) {
// check if an input element is focused within the output element
const checkOutputInputFocus = (e: FocusEvent) => {
lastFocusedOutput = getOutputContainer(e);
const activeElement = window.document.activeElement;
let activeElement = window.document.activeElement;
if (!activeElement) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is already checked below, the shadow root check could just be changed to activeElement?.shadowRoot and it will follow through to the same undefined check that is handled here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good suggestion! I've simplified the code by using optional chaining (activeElement?.shadowRoot) and removing the redundant null check. The existing check below handles both cases. Change implemented in commit d1d0bdd.

@Copilot Copilot AI requested a review from amunger August 4, 2025 18:05
Copilot finished work on behalf of amunger August 4, 2025 18:05
@amunger amunger marked this pull request as ready for review August 4, 2025 21:46
@vs-code-engineering vs-code-engineering bot added this to the August 2025 milestone Aug 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TextInput and TextAreaInput from bokeh triggers notebook shortcuts while writing text
2 participants