Preact: Rerender Issue with React Leaflet In IE.

[SabirAmeen]

I used the following code in Preact.

import { Map, TileLayer, Marker, Popup, ZoomControl } from 'react-leaflet'
import { h, Component } from "preact";
import "leaflet/dist/leaflet.css";

export default class SimpleExample extends Component {
  constructor() {
    super()
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13
    }
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <ZoomControl position="topright" />
        <Marker onClick={()=>this.setState({zoom: 4})} position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}

The issue is whenever the state changes due to the click on the marker, the component is duplicated.
The issue does not come up when i do the above example in React or any viewed in any other browser except IE 11.

[developit]

This is likely due to this bug in preact-portal:
https://github.com/developit/preact-portal/issues/2

We have a long-term fix incoming, but currently don't have one that patches Preact 8.

[kontrollanten]

I'm having the same issue, but I'm not using preact-portal. Do you have any possible workaround for this?

Edit:
I've found a workaround for the critical issue, duplicated Markers, which was to add ref={ref => { this.elemRef = ref; }} to the Marker. But I still got problem with the ZoomControl elements, etc, which I have to hide for IE.

[JoviDeCroock]

The behavior of portals has improved with the release of Preact X, this also seems to work properly now. If you encounter any issues feel free to reopen.