Click on MarkerCluster propagates back to the map on touch device for some reason

[davidarny]

Here how it looks

https://github.com/JustFly1984/react-google-maps-api/assets/17799810/79e8eba7-c1d7-4966-9dfb-dbcb37642d48

I have an onClick handler on GoogleMap components, and it's not triggered on desktop version, but on mobile for some reason

  return (
    <GoogleMap
      zoom={zoom}
      center={center}
      options={mapOptions}
      mapContainerClassName={classNames(styles.root, className)}
      onLoad={onLoad}
      onIdle={onIdle}
      onUnmount={onUnmount}
      onClick={handleMapClick}
    >
      {children}
    </GoogleMap>
  );

This click handler creates a green marker as you can see on video

I'm using latest version of this library

[joshuayadatoz]

I'm having the same issue. v2.19.3

[JustFly1984]

did you try event.stopPropogation() ?

[joshuayadatoz]

Yes, didn't work for me. Maybe I used it wrong, if you have any examples I'll be glad to test. For now I solved it like below: I'm delaying the map click a little bit to check if the click is coming from cluster or not. If so, block map click.

const isClusterClickedRef = useRef(false);
 const onMapClickHandler = (e) => {
    setTimeout(() => {
      if (!isClusterClickedRef.current) {
        onMapClick(e);
      }
      isClusterClickedRef.current = false;
    }, 200); 
  };

  const onClusterClick = (cluster) => {
    isClusterClickedRef.current = true;
  };
   <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={6}
        onClick={onMapClickHandler}
        options={mapOptions}
        onIdle={onIdle}
        onLoad={onMapLoad}
      >

      <MarkerClusterer  onClick={(cluster)=>{onClusterClick(cluster);}} zoomOnClick={true}>