electron: Infinite focus loop when focusing a window with a BrowserView whose focus handler focuses the BV when there are other such windows open

Preflight Checklist

I have read the Contributing Guidelines for this project.
I agree to follow the Code of Conduct that this project adheres to.
I have searched the issue tracker for an issue that matches the one I want to file, without success.

Issue Details

Electron Version: 10.1.1, 9.0.4, 6.0.0, 4.0.0
Operating System: Windows 10

Actual Behavior

closing out of devtools triggers infinite focus events for a secondary window when the window and the main window have focus event handlers that focus their respective browser view web contents

Expected Behavior

I expect this not to happen.

Closing the detached devtools (has to be detached) puts focus in the main window which triggers the main window’s focus handler which focuses the main window’s browser view’s webcontents. For some reason, doing that causes the focus event of the secondary window to fire, and we get left in a focus loop.

To Reproduce

(async () => {
  const {app, BrowserWindow, BrowserView} = require("electron");

  await app.whenReady()

  const [window, browserView] = await setUpBrowserViewAndWindow();

  window.on("focus", () => {
    browserView.webContents.focus();
    // closing out of the devtools activates the main window which triggers this code, which seems to cause the secondary window's focus event to fire forever
  });
  
  browserView.webContents.openDevTools({ mode: "detach" });

  browserView.webContents.on("new-window", async (e, url) => {
    e.preventDefault();
    const [win, bv] = await setUpBrowserViewAndWindow();
    e.newGuest = win;

    win.on("focus", () => {
      bv.webContents.focus();
    });
  });

  async function setUpBrowserViewAndWindow() {
    const window = new BrowserWindow();
    const browserView = new BrowserView();

    window.setBrowserView(browserView);
    const contentBounds = window.getContentBounds();
    browserView.setBounds({ x: 0, y: 0, width: contentBounds.width, height: contentBounds.height });

    await browserView.webContents.loadURL("https://google.com");

    return [window, browserView];
  }
})();

Screenshots

electron_focus_issue

Additional Information

It is important to close out of the devtools the normal way: click the X in the devtools window.

This isn’t reproducible if you close out of devtools via the taskbar (hover over electron icon, find devtools window image, click X)

About this issue

Original URL
State: open
Created 4 years ago
Comments: 17 (4 by maintainers)

Most upvoted comments

This affects 11.2.0 and is reproducible without the devtools workflow:

start main.js
click “Open window with BrowserView”
click “Open window”
Focus the BrowserView window
Close the child window
focus switches between the windows forever.

The window close is triggering a focus (explicitly) and that seems to trigger the other window’s focus for some reason.

main.js:

const { join } = require("path");
const { app, BrowserWindow, BrowserView } = require('electron')

async function createWindow() {
    const mainWindow = new BrowserWindow();
    const view = new BrowserView({ webPreferences: { nativeWindowOpen: true }});
    mainWindow.setBrowserView(view);

    const bounds = mainWindow.getContentBounds();
    view.setBounds({x: 0, y: 0, width: bounds.width, height: bounds.height});

    mainWindow.on("focus", () => {
        view.webContents.focus();
    });

    await view.webContents.loadFile(join(__dirname, "index.html"));

    view.webContents.on("new-window", (e, url, frameName, disp, opts) => {
        if (frameName === "browserView") {
            e.preventDefault();
            const win = new BrowserWindow(opts);
            e.newGuest = win;
            const bv = new BrowserView();
            win.setBrowserView(bv);

            win.on("focus", () => {
                bv.webContents.focus();
            });

            bv.webContents.loadURL(url);
        }
    });

    app.on("browser-window-created", (e, window) => {
        window.on("closed", () => {
            mainWindow.focus();
        });
    });
}

app.on('ready', createWindow)

index.html:

<!DOCTYPE html>
<html>
  <body>
    <button id="b">Open window with BrowserView</button>
    <button id="b2">Open window</button>

    <script src="./renderer.js"></script>
  </body>
</html>

renderer.js:

document.getElementById("b").onclick = () => {
	window.open("https://google.com", "browserView");
};

document.getElementById("b2").onclick = () => {
	window.open("https://google.com");
};

pushkin- on Jan 14, 2021