Inputs uneditable after alert in Electron App

  1. Problem
  2. Solutions
    1. 1. Avoid alert()
    2. 2. Use Electron built-in dialog
  3. Conclusion

Problem

Today I spent hours investigating a weird problem in my Electron app, input fields became uneditable after login failed on the login page. Then I narrowed down the code and it worked when I removed the alert() callback.

In a normal browser, alert() blocks JavaScript execution, but once it’s closed, focus and input behavior usually return to normal. The native alert() function also works in an Electron app because the code runs in a Chromium runtime under the hood, but it is synchronous and modal, meaning it blocks the renderer process, it may not properly restore focus to input fields afterward.

That explains why <Input> fields appear not responding to keyboard events, like onChange, onKeyDown etc.

Solutions

There are two common solutions for this issue:

1. Avoid alert()

If you are using a popular UI framework, it will probably provide some dialog methods for it. Suppose you’re using Ant Design:

1
2
3
4
5
import { Modal } from "antd";
Modal.error({
  title: "Login Failed",
  content: "Please check your credentials.",
});

2. Use Electron built-in dialog

In preload.js:

1
2
3
4
5
6
const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electronAPI", {
  showErrorBox: (title, content) =>
    ipcRenderer.send("show-error-box", { title, content }),
});

In main.js:

1
2
3
4
5
const { ipcMain, dialog } = require("electron");

ipcMain.on("show-error-box", (_event, { title, content }) => {
  dialog.showErrorBox(title, content);
});

In your renderer:

1
2
3
4
5
// call this in a button click or login error handler
window.electronAPI.showErrorBox(
  "Login Failed",
  "Incorrect username or password"
);

Conclusion

The root cause of inputs becoming uneditable after an alert() in an Electron app lies in how alert() blocks the renderer thread in a non-standard way compared to browsers.

To solve this issue, using custom UI dialog or Electron built-in dialog is recommended.