I’m writing an electron app that should be shown when clicking on it’s tray icon, and should be hidden when clicking outside of the window.

This is how I created the window:

mainWindow = new BrowserWindow({
  frame: false,
  width: 375,
  minHeight: 100,
  height: 574,
  icon: getAssetPath('icon.png'),
  alwaysOnTop: true,
  webPreferences: {
    contextIsolation: true,
    nodeIntegration: false,
    preload: app.isPackaged
      ? path.join(__dirname, 'preload.js')
      : path.join(__dirname, '../../.erb/dll/preload.js'),
  },
});

This is the tray click handler:

tray.on('click', () => {
  if (mainWindow?.isVisible()) {
    mainWindow?.hide();
  } else {
    mainWindow?.setAlwaysOnTop(true, 'modal-panel');
    mainWindow?.setVisibleOnAllWorkspaces(true, {
      visibleOnFullScreen: true,
    });
    mainWindow?.show();
  }
});

And this is the blur handler, where I try to achieve the requested behavior:

mainWindow.on('blur', () => {
  mainWindow?.hide();
});

When I click on the tray icon the frameless window is shown as expected, but when I move my mouse from the tray icon the blur event is triggered, thus hiding the mainWindow.
The blur event is also fired whenever I hover over the toolbar, which probably makes it focused.

How can I achieve this behavior?