[Bug]: PointAnnotation propagation/bubling undeneath elements on select

[MariuzM]

Mapbox Implementation

Mapbox

Mapbox Version

10.12.0

Platform

iOS

@rnmapbox/maps version

10.0.15

Standalone component to reproduce

import React, { Camera, MapView, PointAnnotation, StyleURL } from '@rnmapbox/maps';
import { useRef } from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';

const BASE_COORDINATES = {
  centerCoordinate: [98.34, 7.96],
  zoomLevel: 10.1,
};

const Mapbox = (p) => {
  const cameraRef = useRef(null);
  const pointAnnotationRef = useRef(null);

  return (
    <View style={css.container}>
      <MapView
        attributionEnabled={false}
        attributionPosition={{ bottom: 100, right: 0 }}
        logoEnabled={false}
        pitchEnabled={false}
        rotateEnabled={false}
        scaleBarEnabled={false}
        style={css.map}
        styleURL={StyleURL.Dark}
      >
        <Camera
          ref={cameraRef}
          animationDuration={0}
          animationMode="flyTo"
          centerCoordinate={BASE_COORDINATES.centerCoordinate}
          zoomLevel={BASE_COORDINATES.zoomLevel}
        />

        {p.markers.map((item) => {
          return (
            <TouchableOpacity
              key={item.id.toString()}
              onPress={() => {
                pointAnnotationRef.current?.setState({ selected: true });
                console.log('onSelected');
              }}
              style={{ height: 20, width: 20, zIndex: 9999 }}
            >
              <PointAnnotation
                id="marker"
                ref={pointAnnotationRef}
                coordinate={item.coordinates}
                onSelected={() => {
                  console.log('onSelected');
                }}
              >
                <View>
                  <View />
                </View>
              </PointAnnotation>
            </TouchableOpacity>
          );
        })}
      </MapView>
    </View>
  );
};

export default Mapbox;

const css = StyleSheet.create({
  container: {
    height: '100%',
    width: '100%',
  },
  map: {
    flex: 1,
  },
});

Observed behavior and steps to reproduce

I have many PointAnnotation placed in similar area, but when i zoom out they become clustered but thats ok. But as soon as i click on on the top item i see it selects all bellow items also.

Example is that when i click i get console.log('onSelected'); not once but as many items i have underneath the initial PointAnnotation

Expected behavior

When i click on top level of PointAnnotation it should only select top PointAnnotation item and ignore any underneath

Notes / preliminary analysis

No response

Additional links and references

No response

[MariuzM]

Video example, you will see console is being printed twice for both elements when i select in middle, thats the issue

Screen.Recording.2023-10-15.at.22.20.56.mov

[RyanTG]

This is a small thing but you may want to clarify that when you say "but when i zoom out they become clustered but thats ok" you're not referring to actually clustering the markers, but instead you're just saying that the markers end up overlapping one another.

We have experienced this issue, as well - iOS only. Our workaround was to put a sleep on the onPress. Because you press once and then it kind of cycles through all markers before settling on one. It was bad! Thanks for reporting.

[milanatucakov]

The same issue here.

[lochstar]

Same issue.