window.alert()之后无法编辑输入文本字段

问题描述:

我有这个Electron应用程序(使用NodeJS,Bootstrap和AngularJS),其中包含一些可以编辑的文本输入字段。
我有一个触发窗口的按钮。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.

单击另一个应用程序然后再返回该应用程序可以解决此问题。
用Chrome检查器单击文本输入字段之一也可以修复它。

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.

这些是我输入字段的CSS属性

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;
}

这是警报的代码。

电子弹出窗口 elerem.dialog.showMessageBox(elerem.getCurrentWindow(),options)不会引起问题,只有 window.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();
    }
});

我希望message.alert()不会更改文本输入字段的行为。

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

根据 *上的帖子 alert 不被电子支持,因为它在执行时冻结了线程。虽然您可以调用它,但如果可能的话,您可能想了解有关改用电子 dialog 或页内模式(例如MaterialUI或Bootstrap模式)的信息。

According to this post on * 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.