main[removed]('close') gets called more th

Question

I made a basic electron tray that opens a window when one of it's options is clicked. I check if I opened a BrowserWindow with a bool and create or show/hide the window.

const contextMenu = Menu.buildFromTemplate([
      { label: 'Open configuration menu', click:() => {
        console.log("called createwin");
        createwin();
      }

And createwin is:

function createwin(){
  if (windowshown == false) {
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    webPreferences: {
      nodeIntegration: true
    }
  })
  console.log("Window has been created")
  windowshown = true;
mainWindow.loadFile('configuration.html')
}
else {
  mainWindow.show(); 
  console.log("Window has been shown");
} 
  mainWindow.on('close', (event) => {
        event.preventDefault();
        console.log("Window has been hidden");
        mainWindow.hide();
    })
}

When I hide/show the window it created like 4 times, my console looks like this:

called createwin
Window has been created
window has been hidden
called createwin
Window has been shown
window has been hidden
window has been hidden
called createwin
Window has been shown
window has been hidden
window has been hidden
window has been hidden
called createwin
window has been hidden
window has been hidden
window has been hidden
window has been hidden

after fourth time, it just stops responding. I can't even do

      mainWindow.removeAllListeners('close');
      mainWindow.close()
      mainWindow = null
      app.quit();

My problem is that my app completely becomes unresponsive after hiding the window for fourth time.

Update: The app becomes completely unresponsive after hiding the window if I start with npm start instead of visual studio code's debugger.

What am I missing here?

Answer 1

Since you're calling .close() inside the 'close' event, It goes into recursive mode and loops "forever". I have a feel that .close() method its only a event trigger and you have to deal with the close process, so, instead of calling .close() inside the event, keep only the null line.

Example:

  mainWindow.removeAllListeners('close');
  // mainWindow.close() delete this line
  mainWindow = null
  app.quit();

Answer 2

You're adding a new event listener to the close event whenever you call createwin. Each of the event handlers is then run when the window is closed, resulting in the repeated window has been hidden.

You only need to add the event handler once, when you create the new window:

function createwin(){
    if (windowshown == false) {
        mainWindow = new BrowserWindow({
            width: 1000,
            height: 800,
            webPreferences: {
                nodeIntegration: true
            }
        })
        console.log("Window has been created")
        windowshown = true;
        mainWindow.loadFile('configuration.html')

        mainWindow.on('close', (event) => {
            event.preventDefault();
            console.log("Window has been hidden");
            mainWindow.hide();
        })
    }
    else {
        mainWindow.show();
        console.log("Window has been shown");
    }
}