draggable markers on mobile also drag map with first drag

[Valid]

I thought this was an issue with my own implementation, but I noticed that this happens on the 'switch style' demo as well.

When you first press/drag, it drags the point as well as the map, but every subsequent drag only drags the marker as desired. This happens on my Android Pixel XL as well as my iPhone 7.

[alex3165]

Hey @Valid Could you confirm this is still happening with react-mapbox-gl version 3.8.0, we did massive changes on the event logic around drag events for Feature component. In the meantime I opened an issue to improve the demo website to be mobile friendly so that it is easier to test things on mobile: https://github.com/alex3165/react-mapbox-gl/issues/535

[MadalenaGoncalves]

I can confirm that this is still an issue in version 3.8.0, as I am trying to go around it somehow. My idea is to create an overlay div with the pin pointing to the center of the map, and just move the map instead of the pin. I wont even be using a Layer or a Marker, since these move with the map. Just plain position:absolute on an image. But in this case, I also need a way to deal with a shifted map center (https://github.com/mapbox/mapbox-gl-js/issues/1740) Any suggestions to overcome these issues or to a better solution for my case?

[aratcliffe]

I'm also experiencing this issue with 3.8.0.

[aratcliffe]

I found that the source of the problem for me was the safari window bouncing behaviour on iOS. Using iNoBounce fixed this for me.

[cristian-calugar]

We also experience this issue with version 4.8.6. It seems that map.dragPan.disable() / map.dragPan.enable() is not called in case of touchstart/touchend events on layers with draggable features.

[olso]

Still an issue

but fix is "easy"

<MapFeatureRenderer
                  draggable
                  onDragEnd={handleDragEnd}
                  onDragStart={handleDragStart}

const handleDragStart = React.useCallback<
    NonNullable<MapFeatureRendererProps["onDragStart"]>
  >(() => {
    if (mapRef.current) {
      mapRef.current.dragPan.disable();
    }
  }, []);

const handleDragEnd = React.useCallback<
    NonNullable<MapFeatureRendererProps["onDragEnd"]>
  >(() => {
    if (mapRef.current) {
      mapRef.current.dragPan.enable();
    }
  }, []);

thx @cristian-calugar