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

2024/2/27 9:00:32

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.

Answer

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.

http://en.ppmy.cn/q/41694.html

Related Q&A

JavaScript function close() {} [duplicate]

This question already has answers here:onclick calling hide-div function not working(3 answers)Closed 7 years ago.Ive created a function in JS named close function close() {...}and have an onclick call…

JavaScript Button Stop All Audio on Page

Im using a embed player from mixlr.com to play audio. Now I need a button to stop the whole sites audio. Though the player have its own play pause button. But I need my own button to control the whole …

d3 line chart and clip-path

Im new to d3 and svg Could someone explain me how technically is working the drag/pan with the clip-path element http://jsfiddle.net/MKmHM/1/var zoom = d3.behavior.zoom().x(x).on("zoom", dr…

Dealing with tel: anchor

I have an anchor to a telephone number. On phones is great. On desktops with Skype or Google Voice its good. The problem is on desktops that just dont know how to deal with that.What should I do? Dete…

Access getEventListeners from chrome webdriver (python)

Aim:Get all events attached to a node from selenium webdriverIm using selenium-python and Id like to execute a javascript script (through driver.execute_script(my js script).This script uses getEventLi…

React Conditional Render and Navbar

I am controlling what component should be shown on my applications screen via the state and a switch statement in the main render function. I am writing this in react-native but this is a react structu…

Infinite scroll and will_paginate appending the next page of items multiple times

I am following this railscast in trying to implement an infinite scroll page on my rails app. When a user scrolls down to the bottom of the page an new set of items is appended and the page extends, ho…

react if statement in jsx and map

i have working code and little problem with if statement in map function here is codeconst SortableItem = SortableElement(CashItem); const SortableList = SortableContainer(({items}) => {return (<…

change font size after decimal point

I am working with an Opencart E-Commerce website, I need to customize product price font size, for example: product price: $ 250.50 i need to set font size for $ = 16px; 250 = 22px; .50 = 14px;How can…

Difference in initialization of two dates in Javascript

Why do these two dates are differents :var date1 = new Date(); date1.setFullYear(2012); // year (four digits) date1.setMonth(10); // month (from 0-11) date1.setDate(1); // day of the month (from 1-31)v…