prevent the default scrolling event of spacebar when focus is on map (#…

…724)

* prevent the default scrolling event of spacebar when focus is on map

* update keydown event listener and fix query handler bug

* update spacebar test

* update web-map.js and the tests for web-map with the changes

* small fix in web-map.js

Co-authored-by: AliyanH <aliyanulhaq@gmail.com>

src/mapml-viewer.js

@@ -350,14 +350,17 @@ export class MapViewer extends HTMLElement {
       }
     });
     // pasting layer-, links and geojson using Ctrl+V 
-    this.parentElement.addEventListener('keydown', function (e) {
-      if(e.keyCode === 86 && e.ctrlKey && document.activeElement.nodeName === "MAPML-VIEWER"){
+    this.addEventListener('keydown', function (e) {
+      if(e.keyCode === 86 && e.ctrlKey){
         navigator.clipboard
           .readText()
           .then(
             (layer) => {
-              M._pasteLayer(document.activeElement, layer);
+              M._pasteLayer(this, layer);
             });
+      } else if (e.keyCode === 32) {
+        e.preventDefault();
+        this._map.fire('keypress', {originalEvent: e});
       }});
     this.parentElement.addEventListener('mousedown', function (e) {
       if(document.activeElement.nodeName === "MAPML-VIEWER"){

src/web-map.js

@@ -390,14 +390,17 @@ export class WebMap extends HTMLMapElement {
       }
     });
     // pasting layer-, links and geojson using Ctrl+V 
-    this.parentElement.addEventListener('keydown', function (e) {
-      if(e.keyCode === 86 && e.ctrlKey && document.activeElement.nodeName === "DIV"){
+    this.addEventListener('keydown', function (e) {
+      if(e.keyCode === 86 && e.ctrlKey){
         navigator.clipboard
           .readText()
           .then(
             (layer) => {
-              M._pasteLayer(document.activeElement.parentElement, layer);
+              M._pasteLayer(this, layer);
             });
+      } else if (e.keyCode === 32) {
+        e.preventDefault();
+        this._map.fire('keypress', {originalEvent: e});
       }
     });
     this.parentElement.addEventListener('mousedown', function (e) {

test/e2e/mapml-viewer/mapml-viewer.test.js

@@ -177,4 +177,18 @@ test.describe("Playwright mapml-viewer Element Tests", () => {
     );
     expect(layerCount).toEqual(3);
    });
-});
+
+   test("Press spacebar when focus is on map", async () => {
+    // scroll to the top
+    await page.mouse.wheel(0,-1000);
+    await page.waitForTimeout(300);
+    await page.click("body > mapml-viewer");
+    await page.keyboard.press('Space');
+    await page.waitForTimeout(300);
+    const currPos = await page.$eval(
+      "body > mapml-viewer",
+      () => window.pageYOffset
+    );
+    expect(currPos).toEqual(0);
+   });
+});

test/e2e/web-map/map.test.js

@@ -71,4 +71,18 @@ test.describe("Playwright web-map Element Tests", () => {
     );
     expect(layerCount).toEqual(3);
    });
+
+   test("Press spacebar when focus is on map", async () => {
+    //  scroll to the top
+    await page.mouse.wheel(0, -1000);
+    await page.waitForTimeout(300);
+    await page.click("body > map");
+    await page.keyboard.press('Space');
+    await page.waitForTimeout(300);
+    const currPos = await page.$eval(
+      "body > map",
+      () => window.pageYOffset
+    );
+    expect(currPos).toEqual(0);
+   });
 });