[Bug] Popup triggers immediately onClose event + after close popup it will not open again

[mrajaeim]

Description

Popup triggers immediately onClose event and after close popup, it will not open again
For the second problem, I think it's better to add a visibility prop for the popup to control its visibility in the parent component.

Expected Behavior

No response

Steps to Reproduce

1- first add your token to the below sandbox
2- click on the pin image
3- watch console logs (close event trigger on opening)
4- try close and reopen popup
sandbox code

Environment

• Framework version: react-map-gl@7.0.10
• Map library: mapbox-gl@2.8.0
• Browser: Chrome 100.0
• OS: windows 10
• Reactjs: react@18.0.0
• nextjs: next@12.1.4

---

Logs

No response

[Pessimistress]

This has to do with the use of <StrictMode> (which mounts the component twice). I think the correct behavior is to not trigger onClose when the popup is closed by unmounting.

[mrajaeim]

StrictMode

Thanks.
Also, I notice that the onClose event will not be removed from dom and it causes a bug that we cant update state in onClose;
for example:

onClose={() => {
     setPopup(false)
     console.log("hello")
 }}

every time I click the map or move it close event will trigger and if I try to open new popup, multiple close event will be generated.
I think the popup components needs a prop to rewrite close function

[Pessimistress]

That sounds like mapbox/mapbox-gl-js#11535

[Steve2724214]

This has to do with the use of <StrictMode> (which mounts the component twice). I think the correct behavior is to not trigger onClose when the popup is closed by unmounting.

I'm not using strict mode and am experiencing the same issue. Is there a work around while we wait for the fix?

[Pessimistress]

@HawaiianBBQ You are not experiencing the same issue. Please create a Code Sandbox.

[Pessimistress]

@mrajaeim After some consideration I do not think we should change how onClose works. With StrictMode, the open event will be fired twice and that is expected. close events should function symmetrically.

[Pessimistress]

This should be fixed in 7.0.11.

[apetta]

I'm getting this issue in 7.0.16 with strict mode off on react 18.1.0.

The popup will not open when triggered, and if an onClose handler is set, then it fires immediately after the popup is triggered. Setting closeOnClick={false} makes everything work as expected however.

[Pessimistress]

@apetta Your issue is not related to this one. See #1847