Leaflet breake on HTML-input


#1

Hello everyone, I encountered a strange error while developing an Ionic3 application and using the strong typed version of Leafletjs.

The map is declared in a page map.ts in the following way:

this.map = leaflet.map("map").fitWorld();
this.map.setView(leaflet.latLng(lat, lng), 20);

//set the tileLayer
leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  subdomains: ['a', 'b', 'c']
}).addTo(this.map);

And everything works fine.

Now if I have any HTML input in ANY page on my application (even not related directly to map.ts), the map tiles stop working showing a gray area instead of the tile.

This happens with any input on any page, with or without binding variables or functions.

Input tried:

First name: <input type="text" name="fname">

<ion-input type="text" placeholder="Insert ID" ></ion-input>
<div contentEditable="true" (click)="$event.stopPropagation()">testtest</div>

Navigating from the map, to any page, and inserting a simple char inside the input is enough to break the map.

Anyone had any similar issue?