0

If I set a context menu to my tray icon with tray.setContextMenu(contextMenu) in Windows 11, the context menu will appear depending on the mouse psition, which could lead to the menu be outside the visible screen area (what is expected behaviour as the positing is automatically calculated relative to the mouse position.

How would I implement it, so that the context menu is always in a visible area, depending on the taskbar position? (Like the systems bluetooth tray icon works).

import { app, Tray, Menu, screen, BrowserWindow } from 'electron';
import * as path from 'path';

let tray: Tray | null = null;

app.on('ready', () => {
  tray = new Tray(path.join(__dirname, 'assets/icons/tray_icon.png'))

  const contextMenu = Menu.buildFromTemplate([
    { label: 'Item 1'},
  ]);

  tray.setContextMenu(contextMenu);
});

I tried to create a custom window for the menu and position it, but I thought there should be a simpler solution?

Screenshot of the out-of-screen menu

Edit: According to http://man.hubwiz.com/docset/electron.docset/Contents/Resources/Documents/docs/api/tray.html#traypopupcontextmenumenu-position-macos-windows it's possible to set the position at least on windows, which works. I steill need to check it out on MacOS and Linux and will update my question accordingly

Decase
  • 1
  • 1

0 Answers0