GrContextMenu

• actions over a row of a list or a node of a tree — a right click where the user is already looking, instead of a trip to the ”⋯” button at the end of the row;
• quick operations on the selection — rename, duplicate, delete: the same items as in the toolbar, but without moving the mouse across the whole screen;
• actions over an area — a canvas, a map, the free space of a list: there is nothing to click, and a menu at the cursor remains the only place for “Paste”;
• a menu that depends on what was clicked — beforeOpen gives the target away before the opening, and items have time to be assembled for the particular row.

beforeOpen arrives before the opening, and it is the only moment at which the menu can be assembled for whatever was clicked: a folder has one set of actions, a file another. No separate way to cancel the opening is needed — an empty model simply will not open.

<GrContextMenu :items="items" @before-open="onBeforeOpen" @select="onSelect">
  <GrTree :data="data" node-key="id"/>
</GrContextMenu>

function onBeforeOpen(context: GrContextMenuOpenContext): void {
  // The target is taken from the DOM rather than from the mouse event: the same
  // code serves Shift+F10, which has no mouse event at all.
  const row = context.target?.closest('[data-gr-tree-node-key]')
  items.value = row ? itemsFor(row.dataset.grTreeNodeKey!) : []
}

The props reach the component on the next render, so the menu opens one tick after the call — otherwise it would show the items of the previous target.

The wrapper — the content of the default slot. It catches the right click and, more importantly, the keyboard: keydown bubbles from the focused element, and only an ancestor can catch it.

openAt(event) through a ref — when the target is not derived from the DOM: the event came from something other than a pointer, the coordinates are computed by the page itself (a canvas, a map), or the menu belongs to an object that is not in the markup.

<GrContextMenu ref="menu" trigger="manual" :items="items" @select="onSelect">
  <canvas @contextmenu.prevent="onCanvasMenu"/>
</GrContextMenu>

trigger="manual" switches off opening by pointer only. The keyboard path always stays — otherwise the menu would be unavailable from the keyboard, and that handler would have to be written again on every page.

A menu available by right click alone does not exist for the keyboard. The wrapper listens for Shift+F10 and the ContextMenu key, and the anchor becomes the rectangle of the focused element rather than a point: the menu belongs to the row and flips together with it when there is not enough room below.

Inside an input field the call is not intercepted — the native menu with spell checking and the clipboard is more useful there.

The rows a menu opens over are worth making focusable — otherwise there is nowhere to return the focus after closing, and Tab will start from the beginning of the document. GrTree already meets that condition.

The native menu is not an obstacle but a tool: translating the page, viewing the source, saving an image. Shift+right click is passed through to the browser (in Firefox that is a documented way), and it is switched off with the allowNativeMenu prop.

Ctrl is deliberately not part of the escape hatch: on macOS Ctrl+click is the right click, and the menu would stop opening for part of the users.

The anchor is a point of the viewport that has no element, so on scrolling the panel would keep hanging on the screen while the content under it moves away. Native menus behave the same way; the behaviour is switched off with the closeOnScroll prop.

• there are no nested submenus. The model of the items is flat — the same as in GrDropdownMenu. A two-level menu requires navigation of its own (ArrowRight opens, ArrowLeft closes) and a safe triangle for the mouse; that is a separate component, not a prop;
• a long menu at the bottom edge of the screen is shifted rather than shrunk with a scroll. Limiting the height of a panel is not implemented for any anchored layer in the package;
• the component does not emulate a long press on a touch screen. contextmenu on a long press is sent by Android Chrome and is not sent by iOS Safari, and an emulation of your own conflicts with scrolling and text selection. Duplicate the actions with a visible button;
• an empty menu does not open. A panel without a single item has nothing to focus, and it would become a trap with only Esc for a way out.