jsgui3-context-menu-patterns

Implements context menus in jsgui3 applications with positioning, clamping, and dismissal handling.

1|Updated Sep 12, 2025
One-click install
npx skills add https://github.com/metabench/copilot-dl-news --skill jsgui3-context-menu-patterns-metabench
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jsgui3-context-menu-patterns
Source: https://github.com/metabench/copilot-dl-news/tree/main/docs/agi/skills/jsgui3-context-menu-patterns
Command: npx skills add https://github.com/metabench/copilot-dl-news --skill jsgui3-context-menu-patterns-metabench

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building right-click context menus in jsgui3 applications often leads to inconsistent behavior: menus clipped by containers, overflowing the viewport, or leaking event listeners after closure. This Skill provides a standard pattern covering activation, positioning, dismissal, and cleanup so menus behave consistently across Electron and Web targets. ## Core Features & Use Cases - Standardized Activation Flow: Intercept the contextmenu event, prevent the native browser menu, and render a custom menu appended to document.body to avoid z-index and clipping issues. - Viewport Clamping: Position menus from clientX/clientY coordinates and clamp them to window bounds so menus never overflow the screen. - Safe Dismissal & Cleanup: Close menus on outside clicks or the Escape key using deferred global listeners that are removed immediately on closure to prevent memory leaks. - Use Case: When building a jsgui3 file explorer control, apply this pattern so right-clicking a file row opens a clamped, properly dismissed actions menu, then verify behavior with the included lab experiment check script. ## Quick Start Ask the AI to implement a right-click context menu for a jsgui3 control following the standard activation, clamping, and dismissal pattern.

Frequently Asked Questions about jsgui3-context-menu-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom context menu in jsgui3?▼

Listen for the contextmenu event on the target element, call preventDefault to suppress the native menu, then append a positioned menu element to document.body. Set its left and top styles from the event's clientX and clientY coordinates.

How to close a popup menu when clicking outside in JavaScript?▼

Add a global click listener on document that checks whether the click target is inside the menu using menu.contains(ev.target). If the click is outside, remove the menu element and detach the listener. Defer listener registration with setTimeout to avoid immediate triggering.

How do I stop a context menu from overflowing the viewport?▼

Clamp the menu coordinates before rendering: if x plus the menu width exceeds window.innerWidth, subtract the width from x, and apply the same logic for y against window.innerHeight. This flips the menu direction near screen edges.

Why does my context menu leak event listeners after closing?▼

Leaks happen when global document listeners for click and keydown are not removed after the menu closes. Always call removeEventListener for both handlers inside the close logic and null out the menu reference.

Does this context menu pattern work in both Electron and web browsers?▼

Yes, the pattern uses standard DOM APIs such as contextmenu events, document listeners, and fixed positioning, which behave identically in Electron renderer processes and regular browsers. No platform-specific code is required.