Windows.alert() 阻止访问/数据输入到电子反应应用程序中的文本输入字段。 处理 windows.alert 的最佳方法是什么？

Question

I have a text input field in an electron-react app. The windows.alert() was being used to through an alert on altering a state given a certain condition. But after throwing the alert, an input text field in a completely separate form would not allow the user to enter data without clicking out of the application and then back in.

I do currently have a work around, which was throwing the alert using electron's ipcRenderer and ipcMain, but the style does not match well with the rest of the application. Is there a way to handle windows.alert() that does not block data entry into text input fields? What causes windows.alert() to block entering data into text input?

Code Example Before:

function doSomething(value) {
    let array = otherArray;
    if (array.length == 0) {
        //The below was blocking typing into <input> in a completely separate form.
        window.alert("Please add expected value first")
    }
}

Work around code with ipcRenderer from preload.js and ipcMain:

function doSomething(value) {
    let array = otherArray;
    if (array.length == 0) {
        window.api.send("send-alert", "Please add expected value first")
    }
}

//in main.js

ipcMain.on("send-alert", (event, incomingMessage)=> {
    let options = {
         message: incomingMessage
    }
    dialog.showMessageBox(mainBrowserWindow, options)
}

Answer 1

Use toastr to walk around this.

Read this: https://github.com/CodeSeven/toastr

Trigger an error or warning message in place of the window.alert() method. Ie: toastr.warning() or toastr.error()