[Bug]: LongPress on marker propagates to map LongPress
Nobody has claimed this yet.
- Dominant language
- Kotlin
- Stars
- 2.9k
- Forks
- 947
- Avg merge
- 6d 37m
- Merged PRs (30d)
- 1
Description
Mapbox Implementation
Mapbox
Mapbox Version
11.0.0
Platform
iOS
@rnmapbox/maps version
10.1.8
Standalone component to reproduce
import React, { useMemo, useState } from "react";
import { Pressable, View } from "react-native";
import { Camera, MapView, MarkerView } from "@rnmapbox/maps";
const Map = () => {
const [selectedMarkerId, setSelectedMarkerId] = useState(0);
const markers = useMemo(
() => [
{
id: 0,
lat: 41.393042,
lng: 2.1848,
},
{
id: 1,
lat: 41.393242,
lng: 2.1853,
},
{
id: 2,
lat: 41.392747,
lng: 2.185167,
},
],
[],
);
return (
<MapView
style={{ flex: 1 }}
onLongPress={(event) => console.log('Map Long Press Fired...')}
>
<Camera centerCoordinate={[2.1848, 41.393042]} zoomLevel={14} />
{markers.map((marker) => (
<MarkerView key={marker.id} coordinate={[marker.lng, marker.lat]}>
<Pressable onPress={() => setSelectedMarkerId(marker.id)}>
<View
style={{
height: 30,
width: 30,
backgroundColor:
marker.id === selectedMarkerId ? "red" : "blue",
}}
/>
</Pressable>
</MarkerView>
))}
</MapView>
);
};
export default Map;
Observed behavior and steps to reproduce
I am trying to handle a long press event on the marker, but the map also has a long press function that handles initiating a task. Unfortunately, when the marker is pressed, both long press events are fired (marker & map). I noticed a similar bug report earlier on Android but was closed due to it not being reproducible. Not sure if it was fixed in Android but iOS seems to cause this issue.
Expected behavior
I would like the long press to be fired only on the marker and not propagate to the map long press event.
Notes / preliminary analysis
I tried adding e.stopPropagation() but didn't work as planned and saw a comment stating it's not currently supported but maybe planned in the future. See second link in additional links and references.
Additional links and references
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the standalone React Native reproduction using MapView, MarkerView, and Pressable, then review the event-propagation discussion in #2836 and the related Android report #2598. Done means a long press on a marker fires only the marker handler and does not trigger MapView's onLongPress on iOS.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100