How can i prevent popup to be closed when i have fitSelectedRoutes:true options selected in the routingControl

Question

I am using leaflet and leaflet routing machine control libraries.

When i am creating some route path i have the folllowing code:

this.routingControl = L['Routing'].control({
      router: L['Routing'].osrmv1({
        serviceUrl: `http://router.project-osrm.org/route/v1/`,
        language: 'en',
        profile: 'car'
      }),
      showAlternatives: false,
      lineOptions: { styles: [{ color: '#4caf50', weight: 7 }] },
      fitSelectedRoutes: true,
      altLineOptions: { styles: [{ color: '#ed6852', weight: 7 }] },
      show: false,
      routeWhileDragging: true,
      addWaypoints: false,
      waypoints: [
        L.latLng(clickedLat, clickedLng),
        L.latLng(this.selectedCityZipCodeObject.longitude, this.selectedCityZipCodeObject.latitude)
      ],
      createMarker: function (i: number, waypoint: any, n: number) {
        return null;
      }

    });

Note: if i have

fitSelectedRoutes:false

then when i click on some marker,which should make route path until other marker the pop up is showed. But if i have

fitSelectedRoutes:true

then when i click on the marker it show the popup. but the map zoom is changed to fit the route path in the center between the markers and i have smaller zoom which is done automatic from the library.

And then my pop up is closed when the zoom is automatically changed . How can i prevent this from happening ?

I found that everytime this code is triggered on the map it self when there are movements

this.map.on('zoomend', function(){
 thatt.lastEvent.target.unbindPopup()
        .bindPopup(`
        <div><b>Dispatcher:</b></div>
        `).openPopup();
});

i tried to get the last marker and to open the pop up and without success.

I also tried

that.lastEvent.target
          .unbindPopup()
          .bindPopup(`
          <div><b>Dispatcher:</b> ${truckLocationObj?.dispatcher}</div>
          <div><b>Dispatcher Email:</b> ${truckLocationObj?.dispatcher_email}</div>
          <div><b>Truck #:</b> ${truckLocationObj?.truck}</div>
          <div><b>ZIP</b> ${truckLocationObj?.available_zip} </div>
          <div><b>City:</b> ${truckLocationObj?.available_city}</div>
          <div class='red'><b>Distance:</b> ${distance} km to ${that.selectedCityZipCodeObject.city}, time: ${getHm}</div>
          <div><b>Available on:</b> ${truckLocationObj?.available_date}</div>
          `, {closePopupOnClick: false, autoClose: false, closeOnClick:false, autopanstart:false}).openPopup();

with addiional options on the pop up itself but also without success.

Answer 1

So fitSelectedRoutes - true makes something like fitting bounds of the two markers.

 var corner1 = L.latLng(0,0);
 var corner2 = L.latLng(39.310, -84.432);
 let bounds = L.latLngBounds(corner1, corner2);
 map.fitBounds(bounds, { padding: [50, 50] });

with this answer here the problem will be solved.

https://stackoverflow.com/questions/51953050/leaflet-markercluster-exempt-marker-from-clustering
https://jsfiddle.net/sghL4z96/65/