Empty ghost popup left over when dynamically rendering marker popup

[chowington]

Bug report

Updated for v3

• All peer dependencies are installed: React, ReactDOM and Leaflet.
• Using a supported version of React and ReactDOM (v17.0.0 minimum).
• Using the supported version of Leaflet (v1.7.1 minimum) and its corresponding CSS file is loaded.
• Using the latest v3 version of React-Leaflet.
• The issue has not already been reported.
• Make sure you have followed the quick start guide for Leaflet.
• Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

I'm attempting to dynamically render a marker Popup using a boolean to control whether it renders like so: showPopup && <Popup>content</Popup>. When showPopup == false, no popup should appear when clicking a marker. When showPopup == true, the popup should appear when clicking a marker. Further, if showPopup == true and you click a marker to show its popup, setting showPopup == false should make the popup disappear.

Actual behavior

It works when going from false to true -- the popup enables on click -- but when a popup is open and showPopup goes from true to false, an empty popup box is left over, even though the popup component is not present in the component tree according to the React browser plugin.

Steps to reproduce

CodeSandbox Example

There's a button at the top left to toggle showPopup.

1. Click the marker and notice that no popup appears.
2. Click the button to enable popups.
3. Click the marker to trigger the popup containing the correct content.
4. Click the button again to disable popups and notice that it still has a popup, albeit an empty one.

Stack Overflow question for this issue

[PaulLeCam]

Should be fixed in v3.2, please try it out!

[JaZZim]

Hi, the same problem is reproduced in v.3.2. Also the tooltip behaves when I dynamically change styles. It seems that the old component is not unmountable.

[ShardanaSoft]

Hi, I'm too using "react-leaflet": "^3.2.0", and problem is still here.
I've made it works thanks to this https://stackoverflow.com/questions/67712024/react-leaflet-clear-marker-cluster-before-rendering-new-markers

I wrap my markers with MarkerClusterGroup and set a different key every time my marker list is changed

import { v4 } from 'uuid';

<MarkerClusterGroup
key = {v4()}
>
.
.markers
.
</MarkerClusterGroup>