Unable to edit input element after an `alert` in Electron

user_12458034 0
Viewed 364

TLDR

I'm 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 doesn’t change the text in the element. This doesn’t happen if I do the same in the browser, and I’m not sure if I’m 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 doesn’t show a cursor, nor doesn’t it change to show that I’m editing it. Pressing keys in the keyboard doesn’t change the text in the input.

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

Actual behaviour

Expected behaviour

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

Expected behaviour

I’m not sure if I’m doing something wrong, or if this is actually the intended 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"
    }
}

Something weird that I noticed while testing it after posting is that if I minimize the window, and open it again, I’m able to edit the input. It happens too if I open and close the developer tools.

electron html javascript
2 Answers

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.

user_26273380

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.

user_180692640
Related