Using popup in Blazor app breaks autoPan

[mu88]

• I've looked at the documentation to make sure the behavior is documented and expected
• I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• I've searched through the issues to make sure it's not yet reported

Steps to reproduce

1. Create a Blazor app
2. Create a very basic Blazor component
3. Add this Blazor component to a Leaflet popup:

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

Expected behavior
When opening the marker's popup, the map should automatically pan so that the popup`s complete content is visible. For example, it should look like this:

Current behavior
There is no panning of the map at all and therefore the popup opens outside the visible area:

Environment

• Leaflet version: 1.8.0 (problem exists with 1.7.1 as well)
• Browser (with version): Firefox (v100.0), Chrome (v101.0.4951.54)
• OS/Platform (with version): Windows 10 Pro 21H2

Additional context
Maybe it's something similar to tombatossals/angular-leaflet-directive#741

Minimal example reproducing the issue
Since jsfiddle does not allow to use Blazor, there is no super-easy example. But you can simply clone and run my app: https://github.com/mu88/Project28/

Please create an example using https://leafletjs.com/edit.html or any other jsfiddle-like site.

• this example is as simple as possible
• this example does not rely on any third party code

[IvanSanchez]

Hi, and thanks for taking the time to open a bug report in Leaflet.

However, in this repository we only handle bugs in "vanilla" Leaflet. This means that we do not handle bugs which are specific to frameworks such as:

• React
• Ractive
• AngularJS
• Bootstrap
• Leaflet for R
• Joomla
• Wordpress
• Ionic
• Cordova
• Vue
• Electron
• Polymer
• TypeScript
• D3
• Folium
• NativeScript
• ...etc

Please understand that we only have the time and energy to test Leaflet in plain web browsers.

Please try to either reproduce the bug without using any frameworks, or submit a bug to the appropriate repo.

[mu88]

And what would be the appropriate repo? Blazor is working fine, so Microsoft won't do anything.

[IvanSanchez]

Then dissect whatever CSS properties and event handlers are being added to the Leaflet popup, replicate the problem without blazor but with using vanilla JS with those CSS properties and events, and open a new bug here.

Emphasis on the "dissect". What's the minimal amount of vanilla HTML+JS that you must add to a Leaflet popup in order to reproduce the problem?

[mu88]

That's impossible: I cannot disassemble a complete framework which does the heavy-lifting of rendering C# code in the browser. I opened an issue in the Blazor repo, but I'm pretty certain how the answer will look like.

[mu88]

@IvanSanchez please see Microsoft's answer dotnet/aspnetcore#41577 (comment):

Check if there is a method you can trigger to update the popup to react to the size change when the render happens.

Does Leaflet offer a way to trigger a redraw or autopan after the fact?

[IvanSanchez]

Does Leaflet offer a way to trigger a redraw or autopan after the fact?

Yup. The update() method of L.Popup's parent class...

Leaflet/src/layer/DivOverlay.js

Line 170 in 9bfd4b9

update: function () {

...will call the logic to auto-pan the map so the popup is in view, which itself happens in an internal method at...

Leaflet/src/layer/Popup.js

Line 249 in 9bfd4b9

_adjustPan: function (e) {

Don't forget to check https://leafletjs.com/reference

[mu88]

I solved it, see here