[3.1.0] Click on v-map fires MapMouseEvent and MouseEvent

[jasonhibbs]

When listening for a click on the map, I’m expecting the event to be MapMouseEvent, but MouseEvent also fires, and typescript complains that I cannot assign one to the other.

Events in console:

Typescript warning:

To prevent the MouseEvent from firing, I am stopping propagation on the originalEvent, but this doesn’t solve my TS issue:

<v-map @click="onMapClick></v-map>

function onMapClick(e: MapMouseEvent) {
  e.originalEvent.stopPropagation()
}

[liamb13]

Does @click.stop work for you?

[jasonhibbs]

Does @click.stop work for you?

It would likely work on the second MouseEvent, but throws an error on the emitted MapMouseEvent because this doesn’t implement stopPropagation (which is expected)

[jasonhibbs]

From Vue docs on defineEmits:

If a native event (e.g., click) is defined in the emits option, the listener will now only listen to component-emitted click events and no longer respond to native click events.

[liamb13]

This won't solve the issue itself, but just trying to offer a workaround. What's the use case for the @click on v-map, and what's the secondary click used for? Is it necessary in your use case to detect a top level click? (I'm assuming it likely is, to close a popup or similar?)

[jasonhibbs]

I have a workaround:

To prevent the MouseEvent from firing, I am stopping propagation on the originalEvent

This is possible because mapbox already provides the native event as originalEvent in MapMouseEvent – if I needed the native event, I’d expect to use this.

Use case for @click is varied, but the expectation is that it would emit only the mapbox event: MapMouseEvent.

My best guess is that VMap isn’t using defineEmits which would deregister the native event and behave as expected.

[jasonhibbs]

@vinayakkulkarni do you agree with my assessment?

My best guess is that VMap isn’t using defineEmits which would deregister the native event and behave as expected.