[Bug]: Input field becomes unresponsive after window.Alert() and window.confirm()

TC-kHa commented 2 years ago

Preflight Checklist

[X] I have read the Contributing Guidelines for this project.
[X] I agree to follow the Code of Conduct that this project adheres to.
[X] I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Electron Version

16.0.1

What operating system are you using?

Windows

Operating System Version

Windows 10

What arch are you using?

x64

Last Known Working Electron version

No response

Expected Behavior

The input field is clickable and responsive after the user makes a selection from a windows Alert or Confirm.

Actual Behavior

The input field is unclickable. The workaround is to open/close devtools.

Testcase Gist URL

No response

Additional Information

It seems like this is a on-going issue from other users.

https://github.com/electron/electron/issues/22923

https://stackoverflow.com/questions/56805920/cant-edit-input-text-field-after-window-alert/56806101#56806101

I'm able to reproduce this issue consistently from windows electron app

I was able to reproduce this issue from electron-quick-start repo with the latest electron build 16.0.1 using the following index.htmlcode below

<!DOCTYPE html>
<!--Display Alert Message on Button Click Event.-->
<html>
    <head>
        <title>Display Alert Message on Button Click Event.</title>
        <script type="text/javascript">
            function showMessage() {
                alert("Hello friends, this is message.");
            }
        </script>
    </head>
    <body>
            <h1>Display Alert Message on Button Click Event.</h1>
            <b>Click on button to display message: </b><br />
            <br />
            <input type="button" id="btnShowMsg" value="Click Me!" onClick="showMessage()" />
            <input type="text"/>
    </body>
</html>

ItsYanko commented 2 years ago

same issue. electron 16.0.1, windows 11 64 bits.

switching to another app and then coming back to the electron app makes it responsive again, but it's only a temprary fix.

existical commented 2 years ago

Same issue in Electron 17.1.0.

I have found a temporary workaround to get the focus back by sending an event from the renderer proces to the main process, where it triggers the focus out and in. I haven't managed to do this right from the renderer process, so If someone has a simpler recipe, please share.

Main process:

ipcMain.on('focus-fix', () => {
    win.blur();
    win.focus();
});

...where win is an instance of BrowserWindow.

Renderer (browser) process: ipcRenderer.send('focus-fix');

Actual code example of using this in renderer process:

if (confirm('Please confirm some action...')) {
   // Some code here for OK action
   ipcRenderer.send('focus-fix');
}
else {
   // Some code here for Cancel action
   ipcRenderer.send('focus-fix');
}

As you can see I am using ipcRenderer.send('focus-fix'); in every place where I want to trigger the focus. This piece of code can also be wrapped into a function.

Seeroy commented 2 years ago

Same issue in 17.1.2

lzx81647 commented 2 years ago

Same issue in 18.0.3

rafaelpernil2 commented 2 years ago

Same issue in 19.0.2

OtavioSDev commented 2 years ago

Same issue in 20.1.3

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. If you have any new additional information—in particular, if this is still reproducible in the latest version of Electron or in the beta—please include it with your comment!

keerthi16 commented 1 year ago

bump

tjwrona commented 1 year ago

still a problem in the version of electron I downloaded yesterday. (latest stable version)

OStewart-dev commented 1 year ago

The problem still exists (March 19, 2023) and I am also running the latest version of Electron.

Mogeiman commented 1 year ago

The only solution I have found is either stop using alert() in your code entirely, or make your own custom alert notifications.

jacksonpm commented 1 year ago

bump!

alljinx commented 1 year ago

Same issue with ^23.1.3

Nick-Dunne commented 1 year ago

Same issue with ^24.1.3, win10 x64

mErlin-sp commented 1 year ago

Same issue with ^25.1.1, win11 x64

Hamza-Bandukwala commented 1 year ago

Bump

plauwaer commented 1 year ago

Same issue with 25.2.0, win11 x64

alljinx commented 1 year ago

The workaround of @existical (thanks to you) works well. Here's the way I use it to make it esay to remove when the official fix be released :

Main process (same as @existical) :

ipcMain.on('focus-fix', () => {
    win.blur();
    win.focus();
});

Renderer (browser) process :

const oldWindowConfirmFunc = confirm;
window.confirm = (message?: string) => {
  const res = oldWindowConfirmFunc(message);
  (window as unknown as { electron: { send: (msg: string) => void } }).electron.send('focus-fix');
  return res;
};
const oldWindowAlertFunc = alert;
window.alert = (message?: string) => {
  const res = oldWindowAlertFunc(message);
  (window as unknown as { electron: { send: (msg: string) => void } }).electron.send('focus-fix');
  return res;
};

Then you just use window.alert and window.confirm as it's not bugged at all and simply remove theses blocs when it is officially fixed.

plauwaer commented 1 year ago

The workaround of @existical (thanks to you) works well. Here's the way I use it to make it esay to remove when the official fix be released :

Main process (same as @existical) :
ipcMain.on('focus-fix', () => {
    win.blur();
    win.focus();
});
Renderer (browser) process :
const oldWindowConfirmFunc = confirm;
window.confirm = (message?: string) => {
  const res = oldWindowConfirmFunc(message);
  (window as unknown as { electron: { send: (msg: string) => void } }).electron.send('focus-fix');
  return res;
};
const oldWindowAlertFunc = alert;
window.alert = (message?: string) => {
  const res = oldWindowAlertFunc(message);
  (window as unknown as { electron: { send: (msg: string) => void } }).electron.send('focus-fix');
  return res;
};
Then you just use window.alert and window.confirm as it's not bugged at all and simply remove theses blocs when it is officially fixed.

@alljinx: Thank you the workaround of @existical indeed works well.

gabrielmarx13 commented 1 year ago

Same issue with 26.2.0, win11 x64. While the @existical fix works well, the window has an extremely slight flicker. I'm on a 144hz monitor.

hariacharya80 commented 1 year ago

Bump

pvrobays commented 1 year ago

Still an issue, even with the latest electron version. I've updated the gist I've created for #35129 which uses the unload event: https://gist.github.com/37749f99b5872f49e99a9667a7a0e4f3

nobertomaciel commented 11 months ago

This issue yet persists on latest version 27.0.4 windows 10.

electron-issue-triage[bot] commented 8 months ago

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. If you have any new additional information—in particular, if this is still reproducible in the latest version of Electron or in the beta—please include it with your comment!

pushkin- commented 8 months ago

bump

nobertomaciel commented 8 months ago

stale

bump

armysarge commented 8 months ago

bump

qkrwpdlr commented 7 months ago

bump

window.alert = ()=>{}

: )

AlyssaKit commented 7 months ago

bump

LsYueh commented 6 months ago

Same issue with 29.1.0. But now I'm using IPC to invoke dialog.showMessageBox(), instead of call window.alert() directly.

mayur3896 commented 5 months ago

Bump

khashayaramini commented 5 months ago

Same issue with 29.1.4

SakethSripada commented 4 months ago

same issue in 31.0.1

agustaf9 commented 2 months ago

Same issue with 31.3.1

PedroPedalos commented 1 month ago

bump, but why is there no reaction on this issue from 2021 yet? It is quite a serious a problem!

eyobed-dev commented 1 month ago

bump, but why is there no reaction on this issue from 2021 yet? It is quite a serious a problem!

Electron team decided to not support these as they are not asynchronous.

fabiofabbri84 commented 3 weeks ago

If you are using Electron with Cordova, we have made a Cordova plugin that fix this issue: https://github.com/cimatti/cordova-electron-dialogs-fix

Basically it uses the same solution found by @existical and @plauwaer

LqdBcnAtWork commented 3 weeks ago

@eyobed-dev

bump, but why is there no reaction on this issue from 2021 yet? It is quite a serious a problem!

Electron team decided to not support these as they are not asynchronous.

Could you share a link to this?

Not that I don't believe you, having a link to their statement would be nice.

Also, I've written synchronous replacements to alert() and confirm() using their own architecture that doesn't have this problem. I used the sync dialog methods. Zero problems, just a bit of boiler plate to pass the sync request to Main and the response back up.

It's honestly a little insulting that they can't spend the probably 10 minutes to fix this. I would, but I'm unfamiliar with C++ and the electron.js codebase. Especially if all @fabiofabbri84 needed to do is call a blur() and focus() on the BrowserWindow after the function call to fix it for Cordova apps.

fabiofabbri84 commented 3 weeks ago

I found also this: #19977

electron / electron