Simple Browser: Unexpected Focus Stealing When Displaying Error Overlay (e.g., Next.js Dev Mode)

[Taoran-01]

Does this issue occur when all extensions are disabled?: The question is about built-in extensions.

• VS Code Version: 1.99.3 17baf84 x64
• OS Version: Windows 10 Pro 22H2 19045.5737

English Version (Human-reviewed translation)

Problem Description

When using the built-in Simple Browser to preview a Next.js development server (opened via "Preview in Editor" for a new port), the Next.js error overlay (which displays compilation/runtime errors as a non-popup overlay) triggers an unwanted behavior: Simple Browser automatically steals focus and shifts it away from the editor.

During development, I typically split the editor and preview side-by-side for live reloading. However, while coding, the preview window repeatedly interrupts my workflow by forcibly taking focus, which is highly disruptive.

Reproduction Steps

1. Set up a Next.js app in WSL:

   npx create-next-app@latest

   (Accept all default options.)
2. Open the project in VSCode.
3. Open src/app/page.tsx.
4. Start the dev server in the integrated terminal:

   npm run dev

   Click "Preview in Editor" to open the Simple Browser preview.
   (Layout: Editor on the left, preview on the right.)
5. Focus the editor.
6. Introduce a syntax error (e.g., delete a character from </footer> to </foote>).
7. Observed behavior: Focus jumps to the Simple Browser.
   Expected behavior: Editor should retain focus unless explicitly interacted with.

Why This Matters

This issue is not specific to Next.js—it merely demonstrates a scenario where Simple Browser aggressively grabs focus due to page updates. The broader need is:

• Preventing unwanted focus shifts during development.
• Allowing manual focus locking (e.g., to prioritize the editor).

Attempted Solutions

1. Disabling Next.js error overlay: Failed—syntax errors always trigger it.
2. VSCode settings:
   • Tried accessibility.replEditor.autoFocusReplExecution (no effect).
   • No other settings could lock focus or prevent auto-stealing.
3. Simple Browser settings:
   • simpleBrowser.focusLockIndicator.enabled only shows a hint but doesn’t solve the issue.

Suggested Improvements

1. Add a global setting (e.g., simpleBrowser.suppressAutoFocus) to disable automatic focus stealing.
2. Enhance Simple Browser’s preview mode:
   • Option to ignore web page messages (e.g., errors, alerts).
   • A true "read-only preview" mode that behaves like a static render (no interactivity).

Chinese Version

我遇到的问题

我使用 Next.js 开发模式时使用了内置的 Simple Browser 预览网页（新开的 Port 使用 “Preview in Editor” 打开）。Next.js 在开发模式下会显示错误覆盖层，用于展示编译错误或运行时错误。这在网页上是一个类似于弹窗（但并非弹窗）的覆盖。然而，每次展示错误时，Simple Browser 总会自动获取焦点，使我聚焦在网页上。
在开发时，我将编辑器与预览放置在两侧，利用热加载实现快速预览。然而，代码写到一半，每每被“预览窗口”从“编辑器”中抢走焦点。这令我十分苦恼。

复现步骤

1. WSL 内，执行代码：

npx create-next-app@latest

全部选择默认选项，等待 NextJS App 创建完毕。
2. 打开 VSCode，进入创建的 app。
3. 打开文件 src/app/page.tsx。
4. 在集成终端中执行代码：

npm run dev

并选择 “Preview in Editor”，以打开 Simple Browser 预览。
此时你的编辑器应该在左边，而预览窗口在右边。
5. 聚焦编辑器。
6. 删第100行（倒数第5行）某个字符，如 </footer> 至 </foote>。
7. 你的焦点会跳至 Simple Browser。

我认为本问题存在这样的价值

本问题不局限于 Next.js 应用，它只提供了某种特定消息使得 Simple Browser 主动获取焦点。但这并不意味着只有这种情景才有“阻止获取不必要的焦点”和“人为锁定编辑器焦点”的需求。

我尝试过从下面几条路线解决问题

1. 我尝试从 Next.js 中禁用 React 错误覆盖层，但无果。语法错误总是被提示。
2. VSCode 有一个设置 accessibility.replEditor.autoFocusReplExecution，我尝试调整它，但没有效果。其他的设置也一样，没有能够锁定焦点、阻止窗口自动抢走的。
3. 在内置预览插件 Simple Browser 中，只有一项设置 simpleBrowser.focusLockIndicator.enabled。它用于在被抢走焦点时提示，不能起任何作用。

我希望团队对下面几个方面进行改进

1. 在 VSCode 中增加设置，以人为锁定焦点。
2. 在 Simple Browser 插件中增加设置，以屏蔽来自网页的消息，淡化交互，仅作“预览”使用。

[vs-code-engineering]

Thanks for creating this issue!

However, as the description is not in English, it is hard for us to work on it. If you are able to, please edit this issue to be in English. Please do not add a new comment or create a new issue, but rather edit the existing issue.

Unfortunately, automatic translation services are not able to handle the technical language needed to effectively communicate about software issues, so we recommend finding a human translator who is familiar with our technology to help translate.

Otherwise, this issue has been marked as needing translation and a community member may be able to help translate it.

[Taoran-01]

Thanks for creating this issue!

However, as the description is not in English, it is hard for us to work on it. If you are able to, please edit this issue to be in English. Please do not add a new comment or create a new issue, but rather edit the existing issue.

Unfortunately, automatic translation services are not able to handle the technical language needed to effectively communicate about software issues, so we recommend finding a human translator who is familiar with our technology to help translate.

Otherwise, this issue has been marked as needing translation and a community member may be able to help translate it.

Thank you for your note! I understand the importance of having issues communicated clearly in English for the team's workflow.

To clarify:

1. The original issue description was indeed written in Chinese, but it already includes an English version below it (posted at the same time as the Chinese text).
2. The English translation was reviewed by me to ensure technical accuracy—it avoids machine translation pitfalls and preserves the original intent.
3. I’ve edited the issue to move the English version to the top for immediate visibility, while keeping the Chinese version at the bottom for reference.

Please let me know if further adjustments would help!