diff --git a/umap/static/umap/css/contextmenu.css b/umap/static/umap/css/contextmenu.css index e7ed2508..79b55c09 100644 --- a/umap/static/umap/css/contextmenu.css +++ b/umap/static/umap/css/contextmenu.css @@ -1,7 +1,7 @@ .umap-contextmenu { background-color: var(--background-color); padding: calc(var(--box-padding) / 2) var(--box-padding); - position: absolute; + position: fixed; z-index: var(--zindex-contextmenu); border-radius: var(--border-radius); box-shadow: var(--block-shadow); diff --git a/umap/static/umap/js/modules/rendering/ui.js b/umap/static/umap/js/modules/rendering/ui.js index 0311cce4..034962ae 100644 --- a/umap/static/umap/js/modules/rendering/ui.js +++ b/umap/static/umap/js/modules/rendering/ui.js @@ -88,10 +88,7 @@ const FeatureMixin = { DomEvent.stop(event) const items = this._map.getContextMenuItems(event) items.push('-', ...this.feature.getContextMenuItems(event)) - this._map.contextmenu.open( - [event.originalEvent.clientX, event.originalEvent.clientY], - items - ) + this._map.contextmenu.open(event.originalEvent, items) }, onCommit: function () { diff --git a/umap/static/umap/js/modules/tableeditor.js b/umap/static/umap/js/modules/tableeditor.js index 630360f1..79fb6c54 100644 --- a/umap/static/umap/js/modules/tableeditor.js +++ b/umap/static/umap/js/modules/tableeditor.js @@ -64,7 +64,7 @@ export default class TableEditor extends WithTemplate { action: () => this.deleteProperty(property), }) } - this.contextmenu.open([event.clientX, event.clientY], actions) + this.contextmenu.open(event, actions) } renderHeaders() { diff --git a/umap/static/umap/js/modules/ui/contextmenu.js b/umap/static/umap/js/modules/ui/contextmenu.js index fd61c84a..8d2603b5 100644 --- a/umap/static/umap/js/modules/ui/contextmenu.js +++ b/umap/static/umap/js/modules/ui/contextmenu.js @@ -15,7 +15,13 @@ export default class ContextMenu extends Positioned { }) } - open([left, top], items) { + open(event, items) { + const left = event.clientX + const top = event.clientY + this.openAt([left, top], items) + } + + openAt([left, top], items) { this.container.innerHTML = '' for (const item of items) { if (item === '-') { @@ -36,7 +42,12 @@ export default class ContextMenu extends Positioned { this.container.appendChild(li) } } - document.body.appendChild(this.container) + // When adding contextmenu below the map container, clicking on any link will send the + // "focusout" element on link click, preventing to trigger the click action + const parent = document + .elementFromPoint(left, top) + .closest('.leaflet-container').parentNode + parent.appendChild(this.container) if (this.options.fixed) { this.setPosition({ left, top }) } else { diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 5bad389a..815ee1dc 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -663,7 +663,7 @@ const ControlsMixin = { button.addEventListener('click', () => { const x = button.offsetLeft const y = button.offsetTop + button.offsetHeight - menu.open([x, y], actions) + menu.openAt([x, y], actions) }) } this.help.getStartedLink(rightContainer) diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index cfc2c018..5b5737d4 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -1772,10 +1772,7 @@ U.Map = L.Map.extend({ onContextMenu: function (event) { const items = this.getContextMenuItems(event) - this.contextmenu.open( - [event.originalEvent.clientX, event.originalEvent.clientY], - items - ) + this.contextmenu.open(event.originalEvent, items) }, editInOSM: function (e) {