Input field's cursor disappears

[LeamonLee]

Hello electron team,

I'm using electron with Angular. There's one input field in my homepage. But I ran into an issue where right after an alert window popped up, the focus(cursor) of the input field disappeared and never show up again no matter how many times I clicked it. It only shows up again either I minimized the whole window and then bring it back up, or I turned on the developer tools.

Is there any parameters or settings I missed? Thanks

O.S: windows 10
Electron version: V6.0.10
Angular version: V7.0.3

[Nantris]

@LeamonLee are you able to test this on any other systems?

I wonder if this is related to a bug I've been struggling with, only on Windows, tested on 7 & 10): #20464

It seems like something is wonky with focus management on Windows where it thinks it has proper focus on a window when it doesn't.

I see a lot of people seem to be having your issue, so anyone experiencing it, please add some details to this bug or the one I linked (whichever is more relevant).

This bug report (20400) is incomplete and unlikely to be investigated without more details.

[moughxyz]

I'm experiencing this same issue with both Electron 5 and 6. Only occurs on Windows (works fine in Mac and Linux). When an alert appears and is dismissed, inputs do not properly regain focus and do not allow editing until you minimize the app and maximize, or focus on another window, then focus again on your app.

Related: #19977, #18646

[moughxyz]

The earliest mention I could find of this issue was June 5, 2019, so we may not get a fix anytime soon. I was able to use the following workaround to fix this behavior:

  const isWindows = process.platform === 'win32';
  let needsFocusFix = false;
  let triggeringProgrammaticBlur = false;

  win.on('blur', (event) => {
    if(!triggeringProgrammaticBlur) {
      needsFocusFix = true;
    }
  })

  win.on('focus', (event) => {
    if(isWindows && needsFocusFix) {
      needsFocusFix = false;
      triggeringProgrammaticBlur = true;
      setTimeout(function () {
        win.blur();
        win.focus();
        setTimeout(function () {
          triggeringProgrammaticBlur = false;
        }, 100);
      }, 100);
    }
  })

Update: the workaround above causes unintended consequences when attempting to refocus the app, where the app can blur but not refocus at times. The only solution for now appears to be ditching alert() for a custom implementation.

[LeamonLee]

@slapbox Sorry for the late reply. It's exactly the same as how mobitar described. Whenever you use the javascript built-in alert() function. the focus will get lost. But as long as you click on other window, or minimize the app and resume it back, the focus will be back to normal. In the end, I used my own css-style alert window to get around this.

[hldgaofeng]

When will this problem be fixed?

[PhotonAmpere]

To work around this I replaced at the beginning of my code the alert function by the showMessageBoxSync function:

alert = function(str){
  var options = {
    type: 'warning',
    buttons: ["Ok"],
    defaultId: 0,
    cancelId:0,
    detail:str,
    message: ''
  }
  dialog.showMessageBoxSync(null,options)
}

The main advantage is that you can easily delete this piece of code whenever alert() is working again, and don't have to change anything else in your code.
You can change the "type" in the options depending on what you want.

[ChristmasIn2015]

Codes as "window.alert" may have no choice but be replaced by our own css alert component.
Here is a very simple but strange resolution for "window.print()":

Prepare a new page in router just for running print()，
and then it will lose electron window focus after we finish our print work.
But our homepage will not lose the window focus after close this special Page :) !

[andi23rosca]

@rrettig98 i put it in the preload file for the window.

You’ll find in the electron docs info on how to link a preload file.

[fishbone1]

And don't forget confirm():

const remote = window['require']('electron').remote;
window.confirm = function(message) {
  const buttonIdx = remote.dialog.showMessageBoxSync(null, {
    type: 'question',
    buttons: ['OK', 'Cancel'],
    defaultId: 0,
    cancelId: 1,
    detail: message,
    message: ''
  });
  return buttonIdx === 0;
};

[electron-triage]

The Electron version reported on this issue is no longer supported. See our supported versions documentation.

If this is still reproducible on a supported version, please open a new issue with any other new information that a maintainer should know.

Thank you for taking the time to report this issue and helping to make Electron better! Your help is appreciated.

[pushkin-]

this is a dupe of this

[biswajit123]

The earliest mention I could find of this issue was June 5, 2019, so we may not get a fix anytime soon. I was able to use the following workaround to fix this behavior:

  const isWindows = process.platform === 'win32';
  let needsFocusFix = false;
  let triggeringProgrammaticBlur = false;

  win.on('blur', (event) => {
    if(!triggeringProgrammaticBlur) {
      needsFocusFix = true;
    }
  })

  win.on('focus', (event) => {
    if(isWindows && needsFocusFix) {
      needsFocusFix = false;
      triggeringProgrammaticBlur = true;
      setTimeout(function () {
        win.blur();
        win.focus();
        setTimeout(function () {
          triggeringProgrammaticBlur = false;
        }, 100);
      }, 100);
    }
  })

Update: the workaround above causes unintended consequences when attempting to refocus the app, where the app can blur but not refocus at times. The only solution for now appears to be ditching alert() for a custom implementation.

This is working for me like a charm :) thanx buddy

[ChangeFWorld]

this problem still exist until today ,wtf
I was going to Check and Accept my course project but found this problem
why not fix it!!!

[TeddyBear06]

The earliest mention I could find of this issue was June 5, 2019, so we may not get a fix anytime soon. I was able to use the following workaround to fix this behavior:

  const isWindows = process.platform === 'win32';
  let needsFocusFix = false;
  let triggeringProgrammaticBlur = false;

  win.on('blur', (event) => {
    if(!triggeringProgrammaticBlur) {
      needsFocusFix = true;
    }
  })

  win.on('focus', (event) => {
    if(isWindows && needsFocusFix) {
      needsFocusFix = false;
      triggeringProgrammaticBlur = true;
      setTimeout(function () {
        win.blur();
        win.focus();
        setTimeout(function () {
          triggeringProgrammaticBlur = false;
        }, 100);
      }, 100);
    }
  })

Update: the workaround above causes unintended consequences when attempting to refocus the app, where the app can blur but not refocus at times. The only solution for now appears to be ditching alert() for a custom implementation.

Thanks man... Made my day.

[Nantris]

I believe the underlying issue is this: #20464

Please go upvote it for attention. The need for these fixes is ridiculous.

[KrPawan]

alert = function(str){
  var options = {
    type: 'warning',
    buttons: ["Ok"],
    defaultId: 0,
    cancelId:0,
    detail:str,
    message: ''
  }
  dialog.showMessageBoxSync(null,options)
}

How to use this it is generating error when i directly used this

[iamqiz]

showMessageBoxSync

@KrPawan
https://www.electronjs.org/docs/latest/api/dialog