Can't edit input text field after window.alert()

Question

I've got this Electron app (using NodeJS, Bootstrap, AngularJS) with some text input fields that can be edited. I have a button that triggers a window.alert() After it has been triggered, the text input fields are no longer editable.

Clicking on other elements of the app changes nothing.

Clicking on another application then back on the app fixes the problem. Clicking on one of the text input fields with the Chrome inspector fixes it as well.

These are some of the CSS attributes of my input fields

element.style {
}
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.form-control {
    background-color: inherit;
    position: relative;
    z-index: 10;
}
*:focus {
    outline: 0;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
*, ::after, ::before {
    box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
    outline-offset: -2px;
}
:focus {
    outline: -webkit-focus-ring-color auto 5px;
}
input {
    padding: 1px 0px;
}
input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}
input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}
input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb !important;
}
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}
*, ::after, ::before {
    box-sizing: border-box;
}
*, ::after, ::before {
    box-sizing: border-box;
}

This is the code for the alert.

The electron popup elerem.dialog.showMessageBox(elerem.getCurrentWindow(), options) is not causing the problem, only the window.alert("Your settings list is up to date");

req.on("end", function () {
    res = Buffer.concat(chunks).toString('utf8');
    $scope.checkingForUpdate = false;
    $scope.$apply();
    if (res == fs.readFileSync(CONFIG_FILE_PATH, 'utf8')) {
        window.alert("Your settings list is up to date");
    } else {
        let options = {
            buttons: ["Yes", "No"],
            message: "An updated settings list is available would you like to get it ? (You'll loose all unsaved settings)"
        }
        let response = elerem.dialog.showMessageBox(elerem.getCurrentWindow(), options)
        if (response == 0) {
            $scope.refresh = true;
            config.writeToFile(res, CONFIG_FILE_PATH, function (err) {
                if (err) {
                    window.console.log(err);
                } else {
                    window.alert("Your settings list has been updated with success");
                }
            });
        }
    }
    if ($scope.refresh) {
        config.init();
        $scope.$apply();
    }
});

I expect the message.alert() to not change my text input field's behavior.

Answer 1

According to this post on StackOverflow alert is not supported by electron due to it freezing up the threads when executing. While you may be able to call it you may want to see about moving to electron's dialog or an in page modal (like a MaterialUI or Bootstrap modal) instead if possible.

Answer 2

Like @Grim1101 mentioned above, use electron's dialog instead of alert() . For example if you want to show error message with title and content you may use dialog.showErrorBox(title, content)

{dialog} = require('electron').remote

dialog.showErrorBox('title here','type error message here');

Answer 3

I'm a bit late, but I also had difficulty with window.alert(). I wasn't aware it was not supported either, so I set up a way to send a message with electron's dialog as already stated above. Thought I'd share in case anybody else has difficulty.

The way I went about completing this was using with the preload.js file. There is a great post about the preload.js and the ipcRenderer on this thread by reZach.

Below is how I set up my application alert using that.

//In preload.js

const {ipcRenderer, contextBridge} = require('electron');

contextBridge.exposeInMainWorld(
    "api" : {
        messageMain: (channel, message) => {
            let validChannels = ['send-alert'];
            if (validChannels.includes(channel)) {
                 ipcRenderer.send(channel, message);
            }
        }
    }
)


//In main.js

//BrowserWindow Setup
let mainWindow;

function createWindow(){
    let win = new BrowserWindow({
        show: false,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            enableRemoteModule: false,
            preload: __dirname + '/preload.js'
        }
    })

    //load file/URL here 

    win.once("ready-to-show", () => {
        win.show()
    }

}


//ipcMain listener

ipcMain.on("send-alert", (event, incomingMessage) => {
    const options = {
        type: "none",
        buttons: ["Okay"],
        title: "Alert Message!"
        message: incomingMessage
    }
    dialog.showMessageBox(mainWindow, options)
})

app.on('ready', () => {
    mainWindow = createWindow()
}

//In ipcRenderer

window.api.messageMain("send-alert","Write your alert message here!")

Answer 4

To all the people who have commented here, thank you so so much.

I have had a similar issue where in I was using a basic spring mvc with bootstrap. I too faced the exact issue. Input boxes go into readonly mode until I go to a different window and return. My mistake was, I used alerts along with modals.

After going through above answers, I tried replacing the alerts with modal and it worked!!!