Windows.alert() preventing access/data entry into text input field in electron-react app. What is the best way to handle 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()

Answer 2

Yes Same Issue exist with me, but window.alert() works within linux application and not in windows OS, you can go for any other react library like sweetalert2, react . Now Rebuild Your React and Electron App and you will see, your app is properly working...a