Modal window with postponed show allows interaction with a parent window


#1

Hello guys,

We are trying to use a BrowserWindow as a modal popup for warnings. It is design requirement and we cant change it.

The opening is done in main process as custom event handler. Code example:

function openWarningWindow(parent: string, message: string, includeCancel: boolean = false) {
    let winWarn: Electron.BrowserWindow;
    let componentModule = "warning-window.view";
    winWarn = new BrowserWindow({ width: 400, height: 160, modal: true, parent: global[parent], title: "Notification", show: false, maximizable: false, minimizable: false, frame: false, resizable: false, thickFrame: true });
    winWarn.setMenu(null);
    winWarn.loadURL(`${urlPrefix}/renderer.process.html?${componentModule}`);
    winWarn.once("ready-to-show", () => {
        winWarn.show();
        winWarn.webContents.send(constants.OPEN_WARNING_EVENT, message, parent, includeCancel);
    });
}

The problem is that during a time between new BrowserWindow(...) and winWarn.once("ready-to-show", () => {...}) is an user able to react with parent window (mouse/keybord), what is from Business perspective unacceptable as the actions could overcome validations or cause cyclic onFocus/onBlur events and so on.

Is there a way to lock the parent window immediately when the new BrowserWindow(...) is executed? Provides the electron an API for such window locking mechanizm as is used on modal-parent after modal is shown?

Te main reason to show after it is ready to show is the white rectangle which is also unacceptable from graphic design perspective.

The only potential solution I found is described in:

Proposed solution involves kind of code smell (which could be solved) because any potential parent window has to implement additional logic like <div/> on top of whole page as a mask consuming events. This solution we can accept as a corner case solution in case the electron does not or will not have a framework solution for that.

Thank you.