React-mapbox-gl: Clicking on Feature to open a Popup only works properly the first time

[edv4rd0]

I originally thought this was the onClick being finicky, #532 . However, it appears to be something else. onClick works for the area of the image, but not all the time. I can click the feature once, onClick populates a state variable with the data to be loaded into the popup. The popup displays because the state variable is no longer null.

Clicking on the popup set the state variable to null and closes the popup. However, clicking on the feature icon image no longer works. This seems to be resolved by scrolling the mouse wheel and zooming in a bit and trying again a few times.

<Map ref={(e) => { this.map = e; }}
    style="mapbox://styles/mapbox/streets-v9"
    containerStyle={{
    height: "100%",
    width: "100%",
    }}
    center={this.state.center}
    zoom={this.state.zoom}>

    <Layer
        type="symbol"
        layout={{ "icon-image": 'mapMarker', 'icon-anchor': "bottom", "icon-size": 0.6}}
        images={[mapMarker[0], mapMarker[1]]}>
        {this.state.markers}
    </Layer>
        {active ?
        (<Popup coordinates={[active.lon, active.lat] }
            anchor={'bottom-left'}
            offset={[0, -86]}
            onClick={() => {
                this.setState({active: null});
                }}>
<popup html stuff>
           </Popup>) : null 
    }
</Map>

this.state.markers is an array of features. It looks like this:

                markers.push(                    
                        <Feature key={item.id}  coordinates={[item.lon, item.lat]}
                         onClick={() => this.handleClick(item)} />
                );

With my handleClick having console logging to make things visible (in case there was something wrong with my popup code but there wasn't)

    handleClick(item) {
        this.setState({active: item});
        console.log("Fucking clicked");
    }

Any ideas?

[alex3165]

Hey @edv4rd0 , I tried a bit and managed to reproduce it, I will spend some time on it asap to understand if it is a mapbox-gl or react-mapbox-gl issue.

[edv4rd0]

Thank you :-) I'm pretty impressed at how active you are on this project.

[edv4rd0]

@alex3165 is this a mapbox-gl or react-mapbox-gl issue?