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

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

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.

Advertisement

Answer