React Leaflet popups not working on mobile devices

Question

I'm using react-leaflet in an application and it works as intended unless it is viewed from a mobile device (both physical and through dev tools). On mobile devices, the popups will appear and immediately disappear after about 0.2 seconds.

Some points to note

• if I refresh the page on a mobile device via chrome dev tools and then switch to the regular view then the issue persists.
• It appears as though two click events are being detected by the MapContainer when this issue occurs. One of these click events has isTrusted: flase, _simulated: true. I think this could be the route of the issue.
• When a popup is clicked it can be observed in devtools that the following div has a child which is immediately removed. <div class="leaflet-pane leaflet-popup-pane"></div>

Here is the issue replicated in CodeSandbox. If you click the button to pop out the browser window, switch it to view as a mobile device in dev tools, and then refresh the page, you can see what happens.

My component looks like this:

  export const MapView: React.FC<IMapViewProps> = ({
  ...
}) => {
 
  const Markers = data.map(({ location, name, id, events }) => (
    <Marker
      position={[location.lat, location.lon]}
      key={id}
      eventHandlers={{
        click: () => {
          console.log("clicked"); // THIS FIRES TWICE
        },
      }}
    >
      <Popup>
        <span>{name}</span>
      </Popup>
    </Marker>
  ));
    
  return (
    <div>
      <div>
        <br></br>
       IF I TAP HERE ONLY ONE CLICK EVENT IS RECORDED SO IT MUST BE IN THE MAPCONTAINER
        <br></br>
      </div>
      <MapContainer
        center={[55.9533, -3.1883]}
        zoom={10}
        scrollWheelZoom={false}
        style={{ height: "100vh" }}
        className={styles.container}
        doubleClickZoom
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {Markers}
      </MapContainer>
    </div>
  );
};

If I can provide any other information please let me know. Thanks.

Answer 1

As @SethLutske pointed out this issue seems to stem from leaflet.

Adding tap={false} to the MapContainer seems to have solved this issue.

 <MapContainer
    center={[55.9533, -3.1883]}
    zoom={10}
    scrollWheelZoom={false}
    style={{ height: "100vh" }}
    className={styles.container}
    doubleClickZoom
    tap={false}
  >
     ...
  </MapContainer>