bug fix + stop collapse of layer control when contextmenu is open

Author: AliyanH

src/map-extent.js

@@ -146,7 +146,7 @@ export class MapExtent extends HTMLElement {
         case 'label':
           if (oldValue !== newValue) {
             this._layerControlHTML.querySelector(
-              '.mapml-layer-item-name'
+              '.mapml-extent-item-name'
             ).innerHTML = newValue || M.options.locale.dfExtent;
           }
           break;

src/mapml-viewer.js

@@ -426,6 +426,7 @@ export class MapViewer extends HTMLElement {
       collapsed: true,
       mapEl: this
     }).addTo(this._map);
+    this._map.on('movestart', this._layerControl.collapse, this._layerControl);
 
     let scaleValue = M.options.announceScale;
 

src/mapml/control/LayerControl.js

@@ -117,6 +117,17 @@ export var LayerControl = L.Control.Layers.extend({
 
   //overrides collapse and conditionally collapses the panel
   collapse: function (e) {
+    // if layer control is not expanded, return
+    if (!this._container.className.includes('expanded')) {
+      return;
+    }
+    // return if layer contextmenu is still open
+    if (
+      !this._map.contextMenu._extentLayerMenu.hidden ||
+      !this._map.contextMenu._layerMenu.hidden
+    ) {
+      return;
+    }
     if (
       e.target.tagName === 'SELECT' ||
       (e.relatedTarget &&

src/web-map.js

@@ -474,6 +474,7 @@ export class WebMap extends HTMLMapElement {
       collapsed: true,
       mapEl: this
     }).addTo(this._map);
+    this._map.on('movestart', this._layerControl.collapse, this._layerControl);
 
     let scaleValue = M.options.announceScale;
 

test/e2e/core/ArrowKeyNavContextMenu.test.js

@@ -72,7 +72,6 @@ test.describe('Using arrow keys to navigate context menu', () => {
   });
 
   test('Testing Extent layer contextmenu', async () => {
-    await page.pause()
     await page.waitForTimeout(500);
     await page.click('body > mapml-viewer');
     await page.waitForTimeout(500);

test/e2e/core/layerContextMenu.test.js

@@ -246,7 +246,6 @@ test.describe('Playwright Layer Context Menu Tests', () => {
   });
 
   test('Map zooms to extent layer', async () => {
-    await page.pause();
     await page.hover(
       'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div'
     );