MarkerCluster element popup does not appear when clicking a spiderfy element, instead unspiderfy is triggered in Leaflet

Question

I have created a custom popup that appears whenever an element on my map is clicked. However, when spiderfy happens (when a marker cluster is clicked and the map cannot zoom to a level that would separate the elements), clicking a spiderfy element does not cause the popup to appear. Instead, it just triggers unspiderfy.

Is there a way to make this work the way I want, so that clicking a spiderfy element does not cause unspiderfy and instead causes the element popup to appear? (I use these popups to show element-specific information to the user.)

Relevant code:

function popUp(f, l) {
    var out = [];
    if (f.properties) {
        for (key in f.properties) {
            out.push(key + ": " + f.properties[key]);
        }
        l.bindPopup(out.join("<br />"));
    }
}

function getStyle(feature, items) {
    return {
        weight: 3,
        opacity: 1,
        color: [...another function call...],
        fillOpacity: 0.7
    }
}

function createLayer(url, treatments, layerID) {
    var sectionLayer = new L.GeoJSON.AJAX([url], {
        headers: {
            Authorization: 'Bearer ' + token
        },
        onEachFeature: popUp,
        style: function (feature) {
            return getStyle(feature, treatments);
        },
        pointToLayer: function (geojson, latlng) {
            return L.circleMarker(latlng, {
                fill: true,
                opacity: 0.7,
                color: [...another function call...],
                weight: 5,
                radius: 6,
                fillColor: [...another function call...],
                fillOpacity: 0.6
            });
        },
        pane: layerID,
        middleware: function (data) {
            var features = [];

            for (var i = 0; i < data.value.length; i++) {
                if (data.value[i].Mapping && data.value[i].Mapping.coordinates[0] !== 0 && data.value[i].Mapping.coordinates[1] !== 0) {
                    var element = data.value[i];

                    var mapping = reprojectMapping(data.value[i].Mapping);

                    var geojsonFeature = {
                        "type": "Feature",
                        "properties": {
                            "Name": element.Name,
                            "Details": element["Treatment"],
                            "Street View": getStreetView(mapping)
                        },
                        "geometry": mapping
                    };

                    geojsonFeature.properties["Treatment"] = element["Treatment"];

                    features.push(geojsonFeature);
                }
            }

            return features;
        }
    });

    sectionLayer.on('data:loaded', function () {
        addMapLayerToMap(sectionLayer, layerID);
    });
}

function addMapLayerToMap(geoJsonLayer, layerID) {
    var markers = L.markerClusterGroup.layerSupport({
        clusterPane: layerID.toString()
    });

    // Add layer to cluster
    markers.addLayer(geoJsonLayer);
    map.addLayer(markers);
}

(For what it's worth, this code works fine for showing the popup on non-spiderfy elements.)

Answer 1

If you add popups to GeoJSON layer markers and then add GeoJSON layer to cluster layer, popups get lost for spiderified markers.

Solution is to add popups to GeoJSON layer markers and then add those markers directly to cluster layer, all this within onEachFeature option function.

Relevant part of the code could then look something like this:

function createLayer(url, treatments, layerID) {
  var markers = L.markerClusterGroup.layerSupport({
      clusterPane: layerID.toString()
  });
  var sectionLayer = new L.GeoJSON.AJAX([url], {
    headers: {
      Authorization: 'Bearer ' + token
    },
    onEachFeature: function(feature, layer) {
      popUp(feature, layer);
      markers.addLayer(layer);
    },
    style: function (feature) {
      return getStyle(feature, treatments);
    },
    pointToLayer: function (geojson, latlng) {
      return L.circleMarker(latlng, {
        fill: true,
        opacity: 0.7,
        color: [...another function call...],
        weight: 5,
        radius: 6,
        fillColor: [...another function call...],
        fillOpacity: 0.6
      });
    },
    pane: layerID,
    middleware: function (data) {
      var features = [];
      for (var i = 0; i < data.value.length; i++) {
        if (data.value[i].Mapping && data.value[i].Mapping.coordinates[0] !== 0 && data.value[i].Mapping.coordinates[1] !== 0) {
          var element = data.value[i];
          var mapping = reprojectMapping(data.value[i].Mapping);
          var geojsonFeature = {
            "type": "Feature",
            "properties": {
              "Name": element.Name,
              "Details": element["Treatment"],
              "Street View": getStreetView(mapping)
            },
            "geometry": mapping
          };
          geojsonFeature.properties["Treatment"] = element["Treatment"];
          features.push(geojsonFeature);
        }
      }
      return features;
    }
  });

  sectionLayer.on('data:loaded', function () {
    map.addLayer(markers);
  });
}

Here is working JSFiddle example: https://jsfiddle.net/TomazicM/3oLsx2t9/