diff --git a/docs/components/context-menu.md b/docs/components/context-menu.md index 1b87b860..918c2eb2 100644 --- a/docs/components/context-menu.md +++ b/docs/components/context-menu.md @@ -2,7 +2,7 @@ [component-header:sl-context-menu] -Context menus offer additional options through a menu that opens at the pointers location, usually triggered by a right-click. +Context menus offer additional options through a menu that opens at the pointer's location, usually activated by a right-click. Context menus are designed to work with [menus](/components/menu) and [menu items](/components/menu-item). The menu must include `slot="menu"`. Other content you provide will be part of the context menu's target area. @@ -96,4 +96,45 @@ The preferred placement of the context menu can be set with the `placement` attr ``` +### Detecting the Target Item + +A single context menu can wrap a number of items. To detect the item that activated the context menu... + +TODO + +```html preview +
+ + +``` + [component-metadata:sl-context-menu] diff --git a/src/components/context-menu/context-menu.ts b/src/components/context-menu/context-menu.ts index 1375938e..3f5a399e 100644 --- a/src/components/context-menu/context-menu.ts +++ b/src/components/context-menu/context-menu.ts @@ -93,14 +93,20 @@ export default class SlContextMenu extends LitElement { } async handleContextMenu(event: MouseEvent) { - event.preventDefault(); + const target = event.target as HTMLElement; + const targetRect = target.getBoundingClientRect(); + const wrapperRect = this.wrapper.getBoundingClientRect(); const { offsetX, offsetY } = event; + const x = targetRect.left + offsetX - wrapperRect.left; + const y = targetRect.top + offsetY - wrapperRect.top; + + event.preventDefault(); if (this.open) { await this.hide(); } - this.show(offsetX, offsetY); + this.show(x, y); } handleDocumentKeyDown(event: KeyboardEvent) {