When I add a Popup to a Marker then call setState I get `Invariant Violation` about react-leaflet HOT 10 CLOSED

After some investigation it seems to be related to this bug in Chrome -> Child elements of tags not always rendered.

Children of noscript are rendered as string literals.

Workaround

Change noscript in PopupContainer to:

return <div style={{display: none}}>{children}</div>;

I'm using Chrome Version 44.0.2396.0 canary (64-bit).

from react-leaflet.

Apparently, @PaulLeCam is not in favor of changing it to a DIV element. See discussion here #18

from react-leaflet.

Hi,

Removing a Popup is not supported, you need to update the entire layer, see #18 (comment)

from react-leaflet.

Hi Paul,

You might have misread the issue. It's not about removing a Popup.

There is a bug in Chrome which is causing this where noscript children are turning into string literals. Not sure how you want to handle this but a div is a simple fix. Otherwise people trying your library will struggle to get a simple example working.

from react-leaflet.

Sorry I misread about the Popup deletion.

I'm not so up for using a <div> as a workaround because the rendering is made by Leaflet, not React, so the null/<noscript> rendered by the components are only there because React needs to render something.
My main concern is that rendering <div>s could affect the expected layout, but display: none should avoid that issue, I'll try that!

from react-leaflet.

Please let the style be a React.Component.prop so we have some chance
of overriding it.

On 05/11/2015 02:39 PM, Paul Le Cam wrote:

Sorry I misread about the Popup deletion.

I'm not so up for using a |

| as a workaround because the
rendering is made by Leaflet, not React, so the |null|/||
rendered by the components are only there because React needs to
render something.
My main concern is that rendering |

|s could affect the expected
layout, but |display: none| should avoid that issue, I'll try that!

—
Reply to this email directly or view it on GitHub
#27 (comment).

from react-leaflet.

@Frikki, I will try later tonight but I'm pretty sure that is already possible... while definitely limited due to Leaflet handling the rendering.

<Popup maxWidth='300' minWidth='300' >
  some text
</Popup>

https://github.com/PaulLeCam/react-leaflet/blob/master/src/Popup.js#L40
https://github.com/Leaflet/Leaflet/blob/master/src/layer/Popup.js#L11

from react-leaflet.

The style would only apply to the PopupContainer component, that should be invisible anyways, not the Popup that would be rendered by Leaflet.

from react-leaflet.

Hmm, I would think those props would be getting passed through the bindPopup method which would be used in Leaflet when creating the popup element. I may submit a PR to Leaflet eventually that would allow passing more styling to popups. Wouldn't be a big change, just create a styling option, and make their popup module aware of it.

L.popup({ style: { ... } });

popupContainer.bindPopup(content, { style: {...} });

from react-leaflet.

It should work properly now in v0.6 using a div with display: none, I didn't find any issue using it.
Please reopen if the bug appears again after updating.

from react-leaflet.