Leaflet ignore click event when popup is open

Question

I am building a tool allowing to edit some GeoJSON props on a popup opened over the GeoJSON element/layer. When the popup is closed the props are shown in a fixed tooltip over the polygon. However, the popup always opens and closes even if the popup is already open. Is there a way to prevent that? In other words, is there a way for the GeoJSON layer to ignore a click event on the polygon if the popup is already open?

Demo fiddle

var geojson = { "type": "Feature", "properties": {"name":"my poly"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -0.11810302734375, 51.57706953722565 ], [ -0.29937744140625, 51.469407923261336 ], [ 0.098876953125, 51.354631230360226 ], [ 0.17303466796874997, 51.50190410761811 ], [ -0.11810302734375, 51.57706953722565 ] ] ] } };

var geojsonLayer = new L.GeoJSON(geojson);

geojsonLayer
  .on('popupopen', (e) => {
    geojsonLayer.closeTooltip();
    geojsonLayer.getPopup().setLatLng(
      geojsonLayer.getBounds().getCenter()
    );
  })
  .on('popupclose', (e) => {
    geojsonLayer.openTooltip();
  })
  .bindTooltip((layer) => `Name: <b>${layer.feature.properties.name}</b>`, {
    permanent: true,
    interactive: false,
    direction: 'center',
  })
  .bindPopup((layer) => `
    <form>
    <h3>Edit</h3>
    <input type="text" value="${layer.feature.properties.name}" />
    </form>
  `)
  .addTo(map)

map
  .fitBounds(geojsonLayer.getBounds())

Answer 1

One possible way to achieve desired behavior would be to create stand alone popup and then on feature click event fill it with content, put it to the right place and show on the map.

To avoid flickering popup option closeOnClick: false has to be used and on map click event popup has to be closed.

Code could then look something like this:

var popup = L.popup({
  closeOnClick: false
});

const geojsonLayer = L.geoJSON(geojson, {
  onEachFeature: (f, l) => {
    l.on('click', (e) => {
      L.DomEvent.stopPropagation(e);
      popup.setLatLng(
        geojsonLayer.getBounds().getCenter()
      );
      popup.setContent(
        `<form>
           <h3>Edit</h3>
           <input type="text" value=` + f.properties.name + ` />
         </form>`
      );
      popup.openOn(map);
    });
  }
});

map.on('click', (e) => {
  map.closePopup();
});2