Unable to preventDefault inside passive event listener invocation.

[radekdob]

trafficstars

Hello,

mapbox-gl-js version: 1.12 mapbox-gl-draw version: 1.2.0

Steps to Trigger Behavior

1. Add Mapbox Draw control to mapbox map.
2. Open in browser and switch to touch device.
3. Click on map and check console

Just open official web and switch to device toolbar in developer console. Touch a map and check console. https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

Expected Behavior

Should not generate that issue. If any mapbox layers was added, they are not reacting to click/touch event. Only drawing tools and features which was drawed are "alive".

Actual Behavior

After clicking on map when mapbox draw was added as control, mapbox draw generates error.
Error text : " Unable to preventDefault inside passive event listener invocation."

[radekdob]

Ok, I guess this error "Unable to preventDefault inside passive event listener invocation." is not bad behaviour. The issue is that when I was using only pure mapbox, it reacted on "click" event both on touch devices and mouse. When I added Mapbox draw, event from mapbox mouse click started listening only on mouse click, not as previously on touch too.

Maybe it will help somebody in the furure :)

[petrovnn]

@radekdob I confirm. The problem is urgent.

[walwoodr]

Double confirm -- this is a problem for us as well.

[kartikmalhotra]

Does someone got the solution to this problem

[hahaxiaowai]

I encountered the same problem. I wanted to draw on my mobile phone, but I was stumped by this problem.

[zafrii]

I encountered the same problem. When I add draw tool, other layers click event stop working for mobile browsers. However, the click event works fine for desktop browsers.

[sanjay-k7r]

+1

[bren96]

Running into the same problem, anyone come up with a solution?

[zafrii]

@bren96 this is how I solved it

map.on('click', 'points', function (e) {
    show_popup(e);
});


map.on('touchend', 'points', function (e) {
    show_popup(e);
});

i.e., by adding events for both 'click' and 'touchend'

[luisgurmendezMLabs]

This statement is not correct for mobile devices https://github.com/mapbox/mapbox-gl-draw/blob/2b9ce3e58e3695c018a48b6fca78ed1a9d1b67c2/src/events.js#L82

[hu-bobo]

I confirm. The problem is urgent !!!

[NicoSerranoP]

I am using mapbox-gl-draw 1.3.0 in October 2021 and the "Unable to preventDefault inside passive event listener invocation." error is still there :(

[scheepers]

Can confirm. Whenever I draw on the map this error comes up and the draw.create event never fires.

mapbox-gl: 2.6.1 mapbox-gl-draw: 1.3.0

[kekeshuzhen]

mapbox-gl: 2.7.0 Whenever I move the map this log appears, ok, google chrome appears Has this problem been solved, hurry up

[tibz7]

+1

[eirfan]

18 May 2021, The error is still there. Had to remove the Mapbox Draw and look for other alternative

[nlintas]

Problem still here I can confirm too. I am using pop-ups and drawing tools.

[igorbrandaodev]

I'm using 'moveend' event and getting this error.

[erhanask]

Still this problem exists.

[PedroVenancio]

Still an issue here

[danielsippel]

I lived with the workaround @zafrii provided on May 28, 2021 quite some time but the error still occurs in the console and causes some further problems. E.g. if a Popup with option {closeOnClick: true} is open - a touch on any other place on the map does not close it.

So I found a fix for the whole problem. As long as Mapbox guys didn't merge my PR, you can use my fork of mapbox-draw to get rid of this shit by e.g.: npm install danielsippel/mapbox-gl-draw

The fix works for all browsers that support EventListenerOptions, workaround mentioned by @zafrii is not needed any longer.

Tested on:

• Chrome mobile (current); Android13; Google Pixel 6a
• Firefox mobile (current); Android13; Google Pixel 6a
• Safari mobile; iOS v15.4; iPhone 13 Pro Max

[danielsippel]

@chriswhong @mourner

Can you guys please review my PR (or at least find someone who does) and get this basic map feature, what mapbox-draw is, running on more complex maps ("with popups") for mobile browsers again? Thanks.

[Usmankt1999]

@danielsippel I have reviewed you PK , it works pretty well , But i don't know why my project file can not access the theme file from the lib folder , so i manually added that to my project, Good Job, it do fix that issue but ,

[danielsippel]

@Usmankt1999 Thanks for testing. Since my fix has been merged into the main repo, my fork is not necessary any longer.

You can switch back to the main repo: npm install @mapbox/mapbox-gl-draw

Changelog: https://github.com/mapbox/mapbox-gl-draw/releases/tag/v1.4.0

[Usmankt1999]

@danielsippel So , we need to re-install the mapbox/mapbox-gl-draw ,

But i think its fine , i also wanted to customised the theme file so i downloaded it from your repo , i think it will work fine even if i am using npm install danielsippel/mapbox-gl-draw , Right?

[danielsippel]

Works fine, but you will miss future fixes/features, which go to the main repo only.

[Usmankt1999]

@danielsippel , Thanks you for your response alright i will use the main repo then :)

[stepankuzmin]

Hi all,

I'm reopening this because I'm going to revert the fix https://github.com/mapbox/mapbox-gl-draw/pull/1158 since it currently breaks the touch events as reported in https://github.com/mapbox/mapbox-gl-draw/issues/1154. I missed it during the manual testing, and we'd need to look for a different way to do it. Sorry for the inconvenience.

[dollysingh3192]

+1.

Please fix this!

[a-hariti]

Victims++