"mouseDown" event does not triggered on "click" In Mapbox-gl in a scenario

Good day,

In mapbox gl js latest version, I bind a couple of events like click, mousedown, mouseup and mousemove.

In mobile device, if I click, the following order of event should occur:

"mouseMove"(First)
"mouseDown"
"mouseUp"
"click"(Last)

However, in some case's only mouseMove event is occurring. I noticed that this happens only when mapboxgl popup is added on Map and my mouse cursor is above it.

It seems like in mobile when I click on the marker, firstly "mouseMove" event gets called, which shows the popup. but then the rest of the events("mouseDown", "mouseUp" and "click") gets called on popup instead and not the map.

I am confused, How can I call the callbacks that are bind on Map(MapEvents) directly?

The one hack I can do is to add setTimeout delay, so that event could go down to map first and then add popup. But I really hope, if there could be a better way of achieving this.

Any suggestion would be helpful.

Codepen(Request to please open in chrome mobile device emulator)

https://codepen.io/dollysingh3192/pen/QWKzdbO

Also, added a giphy at Dropbox(Edit with offset). Have a look!

https://www.dropbox.com/s/87bq7t762s6t6qw/Jan-17-2021%2000-13-36.mp4?dl=0

from "mouseDown" event does not triggered on "click" In Mapbox-gl in a scenario