title: Stacking of Context Menus in Electron
body: <p>I am building an Electron based application that contains a grid containing unique rows. I would like a context-menu that is specific to each row. Here is an example:</p>
  
  <p><a href="https://i.stack.imgur.com/61TYB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/61TYB.png" alt="Image of GUI with context menu"></a></p>
  
  <p>Although this screen shot is cropped, you can see there are multiple rows and each row contains separate data. Since I'd like to right-click on a row and get a unique context menu, I have implemented <a href="https://github.com/sindresorhus/electron-context-menu" rel="noreferrer">electron-context-menu</a>, which does work on the first right click, but then subsequent right-clicks causes a stacking effect of context menus.</p>
  
  <p>Specifically, here is what happens:</p>
  
  <ol>
  <li>I right click on Row-1 and the proper context menu shows up</li>
  <li>I right click on Row-2 and a repeat of the context menu for Row-1 shows up then Row-2's context menu shows up. (Notice in the screen shot the context menu showing does not correspond to the row my mouse is over)</li>
  <li>This repeats itself.</li>
  </ol>
  
  <p>In React.JS, here is my listener, which collects the <code>contextmenu</code> object as needed by the <code>electron-context-menu</code> module:</p>
  
  <pre><code>  handleContextMenu() {
      this.props.contextMenu({
        window: electron.remote.BrowserWindow.getFocusedWindow(),
        prepend: (params, browserWindow) =&gt; [{
          label: `Library Compare ${this.state.msn}`,
          click: () =&gt; this.runLibCompare()
        }],
        append: (params, browserWindow) =&gt; [{
          label: '---',
        }]
      })
    };
  </code></pre>
  
  <p>Where <code>this.props.contextMenu(...)</code> perculates up the React.JS components to be fed into:</p>
  
  <pre><code>const contextMenu = eRequire('electron-context-menu');
  </code></pre>
  
  <p>I have done some massive debugging and I don't think the issue is the module. The module I am using essentially organizes the information about the context menu and then uses <code>electron.remote</code> functions and a <code>menu.popup</code> function which comes from electron internals. Here is a link to the <a href="https://github.com/sindresorhus/electron-context-menu/blob/master/index.js#L118" rel="noreferrer">specific line in github</a>.</p>
  
  <pre><code>const menu = (electron.Menu || electron.remote.Menu).buildFromTemplate(menuTpl);
  menu.popup(electron.remote ? electron.remote.getCurrentWindow() : win);
  </code></pre>
  
  <p>This call to <code>menu.popup</code> leads to this <a href="https://github.com/electron/electron/blob/bad130f623d1ed0de1a61bc3e82ae553fbf46364/lib/renderer/api/remote.js#L113" rel="noreferrer">line in electron</a>.</p>
  
  <pre><code>  const remoteMemberFunction = function (...args) {
      if (this &amp;&amp; this.constructor === remoteMemberFunction) {
        // Constructor call.
        let ret = ipcRenderer.sendSync('ELECTRON_BROWSER_MEMBER_CONSTRUCTOR', metaId, member.name, wrapArgs(args))
        return metaToValue(ret)
      } else {
        // Call member function.
        let ret = ipcRenderer.sendSync('ELECTRON_BROWSER_MEMBER_CALL', metaId, member.name, wrapArgs(args))
        return metaToValue(ret)
      }
  </code></pre>
  
  <p>}</p>
  
  <p>So I see a call to <code>ipcRender.sendSync</code> -- however when I add debugging statements in <code>ipcMain</code>'s <a href="https://github.com/electron/electron/blob/bad130f623d1ed0de1a61bc3e82ae553fbf46364/lib/browser/rpc-server.js#L357" rel="noreferrer">receiver of those calls</a>, I don't see any output!</p>
  
  <pre><code>ipcMain.on('ELECTRON_BROWSER_MEMBER_CALL', function (event, id, method, args) {
    try {
      args = unwrapArgs(event.sender, args)
      let obj = objectsRegistry.get(id)
  
      if (obj == null) {
        throwRPCError(`Cannot call function '${method}' on missing remote object ${id}`)
      }
  
      callFunction(event, obj[method], obj, args)
    } catch (error) {
      event.returnValue = exceptionToMeta(error)
    }
  })
  </code></pre>
  
  <p>When I added debug statements to the above function, I didn't see any output. And that is where my search his a wall.</p>
  
  <p>I am using electron 1.4.15. I know this issue should be resolvable, after-all the Atom IDE (which is electron based) does not have this issue even though it has multiple context menus.</p>
  
  <p>I think there is some memory I need to clear somewhere, I just can't figure out how to clear the stack of previous context menus!</p>