React-mapbox-gl: Closing a popup when clicking outside of it

[kaitlynbrown]

I'd like for a popup to be closed if a user clicks anywhere outside of the popup.
I've tried adding an onClick handler to the map which closes any open popup, but the problem is that it is triggered even when I click on the popup itself. Even worse, if I try to add a button to the popup, when I try clicking on the button, the map's onClick event gets called first, causing the popup to close before the button's onClick handler is called.

What is the correct way to do this?

[kaitlynbrown]

I was able to resolve this by adding a transparent layer on top of the map when there is a popup showing, and adding an onClick handler to that layer which closes the popup

[jbeuckm]

@kaitlynbrown Did you have to draw something in the transparent layer? I added an empty layer but I don't see the onClick happening... Thank you.

[reinink]

I was able to get around this issue by stopping propagation in my marker click handler:

marker.addEventListener('click', e => {
  e.stopPropagation()
  // ...
})

Also, make sure you have closeOnClick set to true (the default value), and the popups will automatically close when you click the map.

[NathanielGiron]

I'm trying to implement this but no luck, anyone got any snippet?

[todd-elvers]

I've run into this exact same issue! It really shouldn't be this hard to close popups when a user clicks outside of them.

Does anyone have an example up of either of the workarounds that @reinink or @kaitlynbrown suggested?

[abigray]

Clicking outside of a popup on the map closes the popup for me. I believe it's the default behavior when you set up the basic example in the ReactMapGL documentation. What's your closeOnClick value in the Popup? If closeOnClick is set to true (the default value) the popups close when the user clicks on the map.
closeOnClick={true}
...

Unfortunately for me, I need closeOnClick to be false to ensure mouseClicks reach my buttons on the popup so I need a manual way to close the popup from my onClick function.

I've spent a day reading documentation and don't see a way to get the popup object and close it without getting into the HTML document and once I do that it seems to interfere with the React Map/Popup objects so they stop working properly.

For example, this will grab and close the popup, but then clicking on the marker doesn't open the popup again.

var popUps = document.getElementsByClassName('mapboxgl-popup');
popups[0].remove();

[ScottEAdams]

I am using https://material-ui.com/components/click-away-listener/ but I guess you could use something such as useClickAway from react-use or even react-cool-onclickoutside for the same effect

[pinplengpai]

I am using https://material-ui.com/components/click-away-listener/ but I guess you could use something such as useClickAway from react-use or even react-cool-onclickoutside for the same effect

it does work!! thank you so much :)

[disneyquesting]

Has there been any updates on this? I can't get closeOnCLick to work at all :(

[YisusMB]

Hi! i used react-click-away-listener package, and works for me, just wrap your div with this, ie:
js <Popup // your props... > <ClickAwayListener onClickAway={closePopup}> <div> {/* your component to display when popup is visible /*} </div> </ClickAwayListener}> </Popup>
@disneyquesting