fix: fix contextmenu positionning when map is not full screen (#2198)

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);

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 () {

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() {

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 {

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)

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) {