The contents of <Control> do not get rendered on initial <Map> display.

[cherouvim]

When using this code:

<Control position="bottomleft" className="xxx">
  <button className="yyy">Foo</button>
</Control>

The initial <Map> render results in the following HTML which doesn't really contain the contents of the custom control, just its wrapper:

<div class="xxx leaflet-control"></div>

As soon as the next <Map> render takes place, the custom control HTMLs is finalized to:

<div class="xxx leaflet-control"><button class="yyy">Foo</button></div>

Live example: https://codesandbox.io/s/n4y9opn000

[AnDrOlEiN]

Faced with this issue too. Do you have any suggestions how to fix it without using forceUpdate?

[cherouvim]

I have no idea.

[cherouvim]

This happens because:

• on initial render, the if check in https://github.com/LiveBy/react-leaflet-control/blob/master/lib/control.jsx#L34 is truthy because this.leafletElement.getContainer() is undefined.
• on all subsequent renders, this.leafletElement.getContainer() is a DOM node, for example <div class="xxx leaflet-control"><button class="yyy">Foo</button></div>.

This is just an external observation of the problem though. Not sure why this happens or what to do next.

[cherouvim]

A temp solution until this is fixed is to do a this.forceUpdate(); when your custom control component mounts. e.g:

import React, { Component } from "react";
import Control from "react-leaflet-control";

export default class FooControl extends Component {

    componentDidMount() {
        this.forceUpdate();
    }

    render() {
        return (
            <Control position="topleft" className="FooControl">
                <select>
                    <option>foo</option>
                    <option>bar</option>
                </select>
            </Control>
        );
    }
}

[ZhangYiJiang]

A dumb fix would be for <LeafletControl> to forceUpdate itself when it mounts (equivalent to the fix above, but at least it hides the hack)

[bslipek]

How about that:

https://codesandbox.io/s/pj5k2v8l9x?module=%2Fsrc%2FControl.js

[barbalex]

I have run into the same problem. As I am using function components and react hooks there is no forceUpdate.

So in order to force an update on component mount I set state like this:

const [controlType, setControlType] = useState('coordinates')
useEffect(() => setControlType('coordinates'), [])

where setControlType('coordinates') is just (unnecessarily if it weren't for this issue) setting the default value for controlType, which is just a piece of state I happen to use in this component.

[cherouvim]

I've updated my reproduce link https://codesandbox.io/s/n4y9opn000 with the latest dependencies including "react-leaflet-control": "2.1.0", but the problem still exists.

[ZhangYiJiang]

I think there might have been a packaging issue. https://unpkg.com/react-leaflet-control@2.1.0/dist/control.js does not contain componentDidMount and is identical to v2.0.0

[Roschl]

This problem occurs again on v2.1.2, which contains componentDidMount