[Bug] Keyboard events not fired with Google Maps adapter

[axonxorz]

trafficstars

Keyboard events used by TerraDrawSelectMode for deselect, delete, rotate and scale do not seem to be fired when using TerraDrawGoogleMapsAdapter

Tested within our Vue application that utilizes vue3-google-map, as well as within the same application, but using the Google-sanctioned basic initialization with an explicit DOM element.

Terra Draw npm version terra-draw: 1.18.1 terra-draw-google-maps-adapter: 1.1.0

To Reproduce Steps to reproduce the behavior:

1. Create and initialize a GMap instance
2. Create an initialize a TerraDraw instance with the appropriate adapter, with external buttons to set modes:

• TerraDrawSelectMode: various flags including draggable and deletable are true
• TerraDrawPolygonMode: default configuration

3. Complete drawing of a polygon
4. Switch to select mode
5. Press Escape or Delete key

Expected behavior The polygon should be selected or deleted, respectively.

Desktop:

• OS: Linux (Fedora 42)
• Browser: Firefox
• Version: 144.0.2

[floriankramer]

I've run into the same issue. The element the adapter attaches the eventhandlers to is not the element (or a parent of it) that receives focus in google maps.

As a workaround, manually attaching the keyup handler further up the dom tree fixes the issue. Using an id on the root container is ofcourse not nice here, but right now the docs anyways state that the map's root container needs an id.

class KeyupGoogleMapsAdapter extends TerraDrawGoogleMapsAdapter {
  public register(callbacks: TerraDrawCallbacks): void {
    super.register(callbacks);

    const listeners = this.getAdapterListeners();

    const keyDoc = document.getElementById("maps-root-element") as HTMLDivElement;

    for (const listener of listeners) {
      if (listener.name === "keyup") {
        keyDoc.addEventListener("keyup", listener.callback);
      }
    }
  }
}

[JamesLMilner]

Hey @axonxorz @floriankramer - thanks for raising this issue. I can confirm that I can reproduce. This is trickiest in Google Maps because they have multiple different divs for the map instance where as all other library's simply have one.

I think I have a solution that would solve this but requires a small bit of rework in the main terra-draw package and to update the google maps adapter to accommodate. Essentially I think we can pass the event type to getMapEventElement and differentiate depending on the event passed which div to return.

I will look into it when I get a chance 👍🏻