'Unable to edit input element after an `alert` in electron

TLDR

Im learning electron. I have an html element <input type="text">, I can edit the text in it. After I do an alert, when i click the input element it shows no cursor, and pressing keys in the keyboard doesnt change the text in the element. This doesnt happen if I do the same in the browser, and im not sure if im doing something wrong.

Minimum, reproducible example

Setup

In an empty folder in a terminal write:

npm init # And leave the defaults
npm install --save-dev electron

Then create index.js:

const {app, BrowserWindow} = require("electron");

app.on('ready', () => {
    let b = new BrowserWindow();
    b.loadFile("index.html");
});

And index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>

<body>
    <input type="text">
    <button onclick="alert('foo');">Hi</button>
</body>

</html>

Steps to reproduce

  1. On the terminal write npx electron . to start the application.
  2. Edit the text in the input
  3. Press the Hi button.
  4. Close the dialog.
  5. Click the input element.

The element doesnt show a cursor, nor doest it change to show that im editing it. Pressing keys in the keyboard doesnt change the text in the input.

Clicking it multiple times selects the text, and it lets me delete it. But im unable to write new text.

Actual behaviour

Expected behaviour

Open index.html in the browser, and repeat the steps. In the broswer the element shows a cursor, and im able to edit the text in it.

Expected behaviour

Im not sure if im doing something wrong, or if this is actually the indended behaviour.

Here is the package.json if some information here helps:

{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "electron": "^17.1.2"
    }
}

Edit: Added something I missed in the steps to reproduce. Something werid that I noticed while testing it after posting is that if I minimize the window, and open it again, im able to edit the input. It happens too if I open and close the developer tools.

javascripthtmlelectron


Solution 1:[1]

So, this is a really weird problem.

After reproducing the code on my system, everything appears to be working as per normal. IE: The alert box closes and one can still focus their cursor within the text box and even edit the text box without issue.

As Electron does not alter in any way the normal behaviour of Chrome and it works correctly on my (and other peoples) system, one can only come to a single conclusion. There is something wrong with Chrome.

To eliminate any possibility of Chrome file corruption, try deleting your node_modules folder and your package-lock.json file.

Following this, re-install Electron by running npm install at the command prompt.

Solution 2:[2]

After some digging through, I think I've found another answer.

After I got your code on my system, and followed all of the steps in your question, it worked correctly on my end.

Maybe you should check your versions of Electron (and Chromium), and update them if needed.

For you, delete the node_modules folder (and package-lock.json, if it helps), and then run the command below again.

$ npm install

Note: Ignore the $. Also, make sure to run the command in your project directory!

This will ensure you are running the latest versions of everything!

After some investigation on my side, I've concluded that it might be an issue with Chrome, and not Electron, as Electron simply runs Chromium inside the window, regardless of what it does.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Arnav Thorat

Related Questions