electron: [Bug]: menu-will-show, menu-will-close and the click handler are never triggered for top-level menus

Preflight Checklist

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

Electron Version

13.1.7

What operating system are you using?

macOS

Operating System Version

Monterey

What arch are you using?

arm64 (including Apple Silicon)

Last Known Working Electron version

No response

Expected Behavior

I’d expect the menu-will-show and menu-will-close events to work for app menus too.
I’d expect the click function to be called when root-level menu items in app menus are clicked too.

Actual Behavior

None of that is happening.

Testcase Gist URL

No response

Additional Information

The Fiddle just updated itself and the uploader thing is spinning endlessly, so here are the files to reproduce the issue:

main.js (the only file I changed):

// Modules to control application life and create native browser window
const {app, BrowserWindow, Menu} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })

  const menu = Menu.buildFromTemplate ([
    {
      label: 'Electron'
    },
    {
      label: 'Root',
      click: () => {
        console.log ( 'ROOT CLICK' );
      },
      submenu: [
        {
          label: 'Nested',
          click: () => {
            console.log ( 'NESTED CLICK' );
          },  
        }
      ]
    }
  ])

  menu.on ( 'menu-will-close', () => {
    console.log ( 'WILL close' );
  })

  menu.on ( 'menu-will-show', () => {
    console.log ( 'WILL SHOW' );
  })

  Menu.setApplicationMenu ( menu );

})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

renderer.js

// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.

preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 16 (5 by maintainers)

Most upvoted comments

Still broken

robertpatrick on Sep 7, 2023