Popup: closeOnClick causes subsequent popups not to open

[sunech]

Working with markers and popups, I am having issues with only the first popup being opened.
On subsequent clicks, no matter if it is the same marker or a new one, no popup gets displayed and no errors are logged.

The markers onClick event console.logs fine on every click.
The popups onOpen consone.logs fine on the first click, and onClose as well once it is closed.
The popups onClose is the only event that console.logs on the subsequent clicks though. It happens immediately upon the marker click and onOpen is never triggered:

Clicking a marker:
 - Marker onClick triggered - attempting to open popup via setPopupInfo(data)
 - Popup onOpen triggered - rendering popup
Clicking to close the popup:
 - Popup onClose triggered -> setPopupInfo(null)

Clicking the next marker:
 - Marker onClick triggered - attempting to open popup via setPopupInfo(data)
 - Popup onClose triggered -> setPopupInfo(null)

I tried setting closeOnClick={false} on the Popup, after which everything appears to work properly.
So it seems like for some reason, when closeOnClick={true}, the click actually intending to open the Popup is instead triggering it to be closed, before it is even opened.

Not sure if this is a bug, or me who is doing something wrong? I am working with Next.js and managed to replicate the issue with the below code, based on the official Markers & Popup example:

import * as React from 'react';
import {useState} from 'react';
import {render} from 'react-dom';
import Map, {Marker, Popup, NavigationControl, FullscreenControl, ScaleControl, GeolocateControl} from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

const TOKEN = 'redacted';

export default function DCMap(props) {
  const [popupInfo, setPopupInfo] = useState(null);

  return (
    <>
      <Map
        initialViewState={{
          latitude: 37.723698,
          longitude: -122.398056,
          zoom: 10,
          bearing: 0,
          pitch: 0
        }}
        mapStyle="mapbox://styles/mapbox/dark-v9"
        mapboxAccessToken={TOKEN}
      >
        <GeolocateControl position="top-left" />
        <FullscreenControl position="top-left" />
        <NavigationControl position="top-left" />
        <ScaleControl />

        <Marker
          key='1'
          longitude='-122.398056'
          latitude='37.723698'
          anchor="bottom"
        >
          <img src='https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png' onClick={() => setPopupInfo({
            latitude: '37.723698',
            longitude: '-122.398056',
            content: 'test1'
          })}/>
        </Marker>
        <Marker
          key='2'
          longitude='-122.3905374'
          latitude='37.7887409'
          anchor="bottom"
        >
        <img src='https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png' onClick={() => setPopupInfo({
          latitude: '37.7887409',
          longitude: '-122.3905374',
          content: 'test2'
        })}/>
        </Marker>

        {popupInfo && (
          <Popup
            anchor="top"
            longitude={popupInfo.longitude}
            latitude={popupInfo.latitude}
            closeOnClick={true}
            onClose={() => setPopupInfo(null)}
          >
            <div>
              {popupInfo.content}
            </div>
          </Popup>
        )}
      </Map>
    </>
  );
}

[Pessimistress]

I believe this is a bug in mapbox-gl: mapbox/mapbox-gl-js#11535

[sunech]

Interesting, nice catch. Will work around it for now and await and see when it gets fixed.

Thanks for looking in to it and confirming that I am not as senile as I felt. Much appreciated! :-)

[physicianfyi]

I wonder if there was a regression in this library or the main one because I still see this issue

[chiangs]

what is the workaround on this because i still have this issue on react-map-gl 7.2.0-beta.1 and maplibre-gl 4.0.1

Right now, my workaround is to set an onClick on the map and set the marker data to null and this works

const [selectedMarker, setSelectedMarker] = useState<MapMarkerData | null>(null);

const popup = selectedMarker ? (
		<Popup
			anchor={'bottom-left'}
			longitude={selectedMarker.position[0]}
			latitude={selectedMarker.position[1]}
			closeButton={false}
		>
			Test
		</Popup>
	) : null;

<ReactMapGlMap
    id={containerId}
    mapStyle={style}
    attributionControl={false}
    minZoom={1}
    maxZoom={6}
    initialViewState={{
	    longitude: center[0],
	    latitude: center[1],
	    zoom: 1,
    }}
    onClick={() => setSelectedMarker(null)}
    >
      {selectedMarker && (
	      <Popup
		      anchor={'bottom-left'}
		      longitude={selectedMarker.position[0]}
		      latitude={selectedMarker.position[1]}
		      closeButton={false}
	      >
		      <pre>{selectedMarker.id}</pre>
	      </Popup>
      )}
</ReactMapGlMap>

[sunech]

I only had the issue when using Marker tags as far as I recall, so I just opted for getting markers via Source/Layer tags instead.