Rendering Blazor Custom Element from Leaflet

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

In my app, I’m combining the JS mapping framework Leaflet and Blazor Server. I have a Blazor component LifePointDetail.razor which is embedded into a Leaflet popup as a Blazor Custom Element:

let marker = L.marker([latitude, longitude]);
marker.bindPopup("<life-point-detail></life-point-detail>");
marker.addTo(leafletMap);

This works fine so far, but I’m stumbling across an issue which I don’t know how to solve: Leaflet popups have the ability to automatically pan the map when opening a popup (see docu). But in conjunction with my Blazor Custom Element, this doesn’t work. Please see the following screenshot to better understand the problem:

Expected Behavior

Instead, it should look like this after clicking the marker and opening the popup:

Please note that in a vanilla Leaflet application, you don’t have to pan manually: the popup automatically gets centered in the middle so that it is completely visible.

Steps To Reproduce

1. Create a Blazor app.
2. Create a very basic Blazor component MyBlazorComponent and make it a Blazor Custom Element.
3. Add this Blazor component to a Leaflet popup:

let marker = L.marker([latitude, longitude]);
marker.bindPopup("<my-blazor-component></my-blazor-component>");
marker.addTo(leafletMap);

Exceptions (if any)

No response

.NET Version

6.0.202

Anything else?

The guys on the Leaflet side don’t consider this a bug on their side (see related issue). So I’m in a typical sandwich position 🤷🏻‍♂️

I assume it could be related to some sort of timing: when Leaflet renders marker.bindPopup(), the Blazor Custom Element <my-blazor-component> is not yet ready rendered. Therefore the components extent (width and height) are not yet known/accessible for Leaflet - maybe width and height are 0 at a certain point in time when Leaflet tries to render them?

[SteveSandersonMS]

Looks like this would be handled by calling Leaflet’s update method after the DOM content is rendered (e.g., in Blazor’s OnAfterRenderAsync) as suggested at https://github.com/Leaflet/Leaflet/issues/8217#issuecomment-1121436852.

[mu88]

I could solve it 💪🏻 instead of calling marker.getPopup().update(), I had to do the following:

let popup = marker.getPopup();
popup._updateLayout();
popup._updatePosition();
popup._adjustPan();

This is exactly the same code as Leaflet’s original, except that popup._updateContent(); isn’t called. Doing so triggers an infinite loop between Leaflet trying to render the popup, Blazor creating its component and afterwards updating the popup, Leaflet trying to render the popup again, etc. This infinite loop will be interrupted sometime by the browser.