Specific marker's tooltip appears when clicking outside the map

[BrekiTomasson]

Checklist

• I've looked at the documentation to make sure the behavior isn't documented and expected.
• I'm sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
• I've searched through the current issues to make sure this hasn't been reported yet.
• I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

I've got a fairly straightforward map where the Javascript looks like this:

    var map = window.L.map('map').setView([30, 0], 3);

    var markerLayer = L.layerGroup();

    function onEachFeature(feature, layer) {
      let popupContent = '';

      if (feature.properties) {
        if (feature.properties.name) {
          popupContent += '<strong>Name:</strong> <a href="https://tankertrackers.com/report/vessel/' + feature.properties.id + '" target="_blank">' + feature.properties.name + '</a>';
          }

          if (feature.properties.imo) {
            popupContent += ' (' + feature.properties.imo + ')';
          }

          if (feature.properties.date) {
            popupContent += '<br /><strong>Date:</strong> ' + feature.properties.date + '<br />';
          }

          if (feature.properties.url) {
            popupContent += '<strong>Imagery:</strong> <a href="' + feature.properties.url + '" target="_blank">link</a><br />';
          }
      }

      if(popupContent !== '') {
        layer.bindPopup(popupContent);
      }
    }

    var realtime = L.realtime({
      url: '/api/internal/darkfleet',
      crossOrigin: true,
      type: 'json'
    }, {
      onEachFeature: onEachFeature,
      interval: 120000
    }).addTo(markerLayer);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy;TankerTrackers.com, Inc.',
    }).addTo(map);

    markerLayer.addTo(map)

It initalizes a map, then uses the leaflet-realtime library to pull in a GeoJSON file, and then uses the content of the GeoJSON to design a tooltip that it adds to each of the markers. So far so good.

However, when I click outside of a marker, anywhere on the map that isn't already covered in a marker, it automatically brings up the tooltip for a specific marker, and it's always the SECOND marker in the GeoJSON. I've checked Z-levels, I've checked that there's nothing odd with the features or properties, and nothing seems to stand out as broken. If I change the order of elements in the FeatureCollection, it still always pops up the tooltip for the SECOND marker in there.

I've stepped through the events that happen in the browser, and it seems that the marker is somehow selected by the time it gets to the update method in DivOverlay.js, but I can't tell why that particular marker (or its tooltip, more precisely) is the one being brought up.

Here's a video showing the bug in action:

Screen.Recording.2023-10-25.at.21.24.15.mov

Any help would be greatly appreciated!

Expected behavior

Clicking outside of a marker should close all tooltips and not open any new ones.

Current behavior

Clicking outside of a marker always opens a particular marker's tooltip, unless that one is currently open, in which case it closes that tooltip.

Minimal example reproducing the issue

No response

Environment

• Leaflet version: 1.9.4
• Browser (with version): Chrome (latest), Safari (latest)
• OS/Platform (with version): MacOS Ventura 13.6

[BrekiTomasson]

Here's an example of the GeoJSON file, in case that helps:

{
  "type": "FeatureCollection",
  "features": [
   {
    "type": "Feature",
    "properties": {
      "id": 2118,
      "imo": 9041057,
      "name": "GOTICA",
      "date": "2023-10-25",
      "recent": true,
      "url": "https://sentinelshare.page.link/NJRV"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        "32.7548",
        "32.66741"
      ]
    },
    "id": 2118
  },
  {
    "type": "Feature",
    "properties": {
      "id": 3603,
      "imo": 9173745,
      "name": "CHLOE",
      "date": "2023-10-25",
      "recent": true,
      "url": "https://sentinelshare.page.link/9EVi"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        "56.37091",
        "26.94014"
      ]
    },
    "id": 3603
  },
  [...hundreds more just like the ones above...]
  ]
}

[BrekiTomasson]

Also, it seems to work as intended if I use bindTooltip instead of bindPopup but as I have links inside the information box that pops up, that's not a viable solution for me.

[BrekiTomasson]

I just downgraded Leaflet to v1.9.3, and it now works as intended, so this seems to be something that was introduced in 1.9.4.

[Falke-Design]

@BrekiTomasson would it be possible for you the create a demo? For example on www.leafletjs.com/edit.html
And can you please test if it also happens without the leaflet-realtime plugin?