electron: BrowserWindow.on close prompt not working - electron

Question

I have a normal electron app using React. And I wan to show a prompt before being closed.
The expected behavior is When I click on the "X" button, the window has to stay open and show the dialog before closing it so that I can choose if I really want to quit or not.
But instead, this is what happens
The electron window closes before showing the dialog. And the dialog closes on its own before i click on any button.
Here is the code included in the main.dev.ts
mainWindow.on('close',(e) => {
var choice = dialog.showMessageBox(mainWindow,
{
type: 'question',
buttons: ['Yes', 'No'],
title: 'Confirm',
message: 'Are you sure you want to quit?'
});
if(choice == 1){
e.preventDefault();
}});
I've already checked if there are some helfpul questions here on stackoverflow but found none.
Your help would be appreciated.

Answer 1

If you show a confirmation prompt you need to call e.preventDefault(); either way to keep the window open.
Then if they click "Yes", close the window separately.
However you get a problem where once the window closes after the user clicks "Yes" it'll trigger the close event again, causing an infinite loop. I've fixed this problem with the hasConfirmedClose variable below.
Here's what'll work:
var hasConfirmedClose = false;
mainWindow.on('close', (e) => {
if (!hasConfirmedClose) {
e.preventDefault(); // Prevent default no matter what.
var choice = dialog.showMessageBox(mainWindow, {
type: 'question',
buttons: ['Yes', 'No'],
title: 'Confirm',
message: 'Are you sure you want to quit?'
});
if (choice == 1) {
hasConfirmedClose = true;
mainWindow.close();
}
}
});