I’m having an issue regarding click handlers and selections of a layer. I created a layer in Mapbox Studio for the color and set it to JSON format:

[
    "case",
    [
        "==",
        [
            "feature-state",
            "state"
        ],
        false
    ],
    "rgba(155,155,155,0.8)",
    "rgba(0,0,0,0)"
]

And in my code:

protected addClickInteraction(layerId: string) {
    const clickId = `Click-Handler-${layerId}`;

    super.addInteraction(clickId, {
        type: 'click',
        target: {
            layerId: layerId
        },
        handler: e => {
            const feature = e.feature;

            if (!feature?.id) {
                return false;
            }

            const inArray = this._featured.some(f => f.id === feature.id);

            if (inArray) {
                super.setFeatureState(feature, { state: false });
                this._featured = [];
            } else {
                super.setFeatureState(feature, { state: true });
                this._featured = [feature as TTargetFeature];
            }

            console.log({
                inArray: this._featured.some(f => f.id === feature.id),
                selected: this._featured,
                state: super.getFeatureState(feature),
                f: feature
            });
        }
    });
}

Now the console outputs that at the end the given layer is in the array, and the state outputs:

{ state: true }

Yet the repaint doesn’t work. It only works on the second click, whether it’s another layer or another polygon in the same tileset.

Also, clearing the featured state doesn’t work on the first click, only on the second. This results in multiple polygons behaving as if they are selected at the same time, while the output of:

this._featured

does not match what is rendered.

This issue only occurs with layers coming from Mapbox Studio. The same approach is used for GeoJSON data layers, and it works fine there.