Mapbox-gl popup.on('open') not firing

Question

Using Mapbox GL Javascript Web

My popups are opening but the 'open' event isn't firing. I read that this was fixed a while back so is there something I'm doing wrong here:

this.map.on('click', 'listings', (e: any) => {
    const coordinates = e.features[0].geometry.coordinates.slice();
    const detailURI = e.features[0].properties.detailURI;

    new mapboxgl.Popup()
        .setLngLat(coordinates)
        .setHTML(title)
        .addTo(this.map)
        .on('open', () => {
            console.log('Popup opened'); // <--- Not firing

            // Add a click listener to the custom button with dynamic URI
            document.getElementById('popup-detail-button')
            .addEventListener('click', () => {
            console.log(`Clicked with link: ${detailURI}`);
            });
         });
});

If I do it like this:

this.map.on('click', 'listings', (e: any) => {
  const coordinates = e.features[0].geometry.coordinates.slice();
  const detailURI = e.features[0].properties.detailURI;

  new mapboxgl.Popup()
      .setLngLat(coordinates)
      .setHTML(this.returnPopupHTML(image))
      .addTo(this.map);

      // Add a click listener
      document.getElementById('popup-detail-button')
      .addEventListener('click', () => {
        console.log(`Clicked with link: ${detailURI}`); // <-- Only works if closing popup before opening another one
      });
});

The click listener on the button works but if I don't close a popup before opening another one then the event doesn't fire. This is something that users frequently do: they open a popup and then scroll over and open another one without closing the first. So what I'm really trying to do here is ensure whenever a popup is opened and it's custom button is clicked - the event is registered with the correct URI.

Thanks

Answer 1

I'm sure you figured it out by now. I'm just posting this for anyone else that comes across the situation. But I was having the same problem. Initially I was trying to do this.

const popup = new mapboxgl.Popup()
                .setLngLat(e.lngLat)
                .setHTML(
                    this.generatePointAndMarkerPopupHtml(layerClicked[0]),
                )
                .addTo(this.map);

 popup.on('open', e => {
                console.log('it is open');

            });

What's weird is that when I used 'close' the console.log would work but not with 'open'.

What finally worked was your format, but putting the .on event listener before the .addTo(map):

    const layerClicked: mapboxgl.MapboxGeoJSONFeature[] = this.map.queryRenderedFeatures(
            e.point,
            {
                layers: this.currentPointAndMarkerLayerIds,
            },
        );    

    const popup = new mapboxgl.Popup()
                .setLngLat(e.lngLat)
                .setHTML(
                    this.generatePointAndMarkerPopupHtml(layerClicked[0]),
                )
                .on('open', e => {
                    console.log('It is open');
                })
                .addTo(this.map);

Thanks for setting me in the right direction!

EDIT

If you wanted to add an event listener I just do this.

const popup = new mapboxgl.Popup()
                .setLngLat(e.lngLat)
                .setHTML(

this.generatePointAndMarkerPopupHtml(layerClicked[0]),
                )
                .on('open', e => {
                    if (document.getElementById('drive-time')) {
                      document
                        .getElementById('drive-time')
                        .addEventListener('click', e => {
                          console.log(e);
                        });
                    }
                })
                .addTo(this.map);

I check if the document element exists or else it will create an error for in the developer console for me.