don't clear state on reload, just on setData (#7129)

src/source/source_cache.js

@@ -75,6 +75,7 @@ class SourceCache extends Evented {
             // for sources with mutable data, this event fires when the underlying data
             // to a source is changed. (i.e. GeoJSONSource#setData and ImageSource#serCoordinates)
             if (this._sourceLoaded && !this._paused && e.dataType === "source" && e.sourceDataType === 'content') {
+                if (this._source.type === "geojson") this.resetState();
                 this.reload();
                 if (this.transform) {
                     this.update(this.transform);
@@ -217,9 +218,6 @@ class SourceCache extends Evented {
         }
 
         this._cache.reset();
-        //Reset the SourceCache when the source has been reloaded. For GeoJSON sources, 
-        // the `id`  of features is not guaranteed to be identical when updated
-        this._state = new SourceFeatureState();
 
         for (const i in this._tiles) {
             if (this._tiles[i].state !== "errored") this._reloadTile(i, 'reloading');
@@ -833,6 +831,14 @@ class SourceCache extends Evented {
         sourceLayer = sourceLayer || '_geojsonTileLayer';
         return this._state.getState(sourceLayer, feature);
     }
+
+    /**
+     * Reset the SourceFeatureState when the source has been reloaded. For GeoJSON sources,
+     * the `id`  of features is not guaranteed to be identical when updated
+     */
+    resetState() {
+        this._state = new SourceFeatureState();
+    }
 }
 
 SourceCache.maxOverzooming = 10;

src/style-spec/types.js

@@ -408,3 +408,4 @@ export type LayerSpecification =
     | RasterLayerSpecification
     | HillshadeLayerSpecification
     | BackgroundLayerSpecification;
+

test/integration/render-tests/feature-state/set-paint-property/style.json

@@ -0,0 +1,71 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64,
+      "operations": [
+        [
+          "setFeatureState",
+          {
+            "source": "geojson",
+            "id": "1"
+          },
+          {
+            "color": "red"
+          }
+        ],
+        [
+          "wait"
+        ],
+        [
+          "setPaintProperty",
+          "circle",
+          "circle-radius",
+          10
+        ],
+        [
+          "wait"
+        ]
+      ]
+    }
+  },
+  "zoom": 2,
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "Feature",
+        "id": "1",
+        "properties": {
+          "radius": 5
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [
+            0,
+            0
+          ]
+        }
+      }
+    }
+  },
+  "layers": [
+    {
+      "id": "circle",
+      "type": "circle",
+      "source": "geojson",
+      "paint": {
+        "circle-radius": ["get", "radius"],
+        "circle-color": [
+          "coalesce",
+          [
+            "feature-state",
+            "color"
+          ],
+          "black"
+        ]
+      }
+    }
+  ]
+}

test/unit/ui/map.test.js

@@ -1268,6 +1268,38 @@ test('Map', (t) => {
                 t.end();
             });
         });
+
+        t.test('resets state if source data is updated', (t) => {
+            const map = createMap(t, {
+                style: {
+                    "version": 8,
+                    "sources": {
+                        "geojson": createStyleSource()
+                    },
+                    "layers": []
+                }
+            });
+            map.on('load', () => {
+                map.setFeatureState({ source: 'geojson', id: '12345'}, {'hover': true});
+                const fState = map.getFeatureState({ source: 'geojson', id: '12345'});
+                t.equal(fState.hover, true);
+
+                map.on('data', () => {
+                    if (map.isSourceLoaded('geojson')) {
+                        const cleanState = map.getFeatureState({ source: 'geojson', id: '12345'});
+                        t.notOk(cleanState.hover);
+                        t.end();
+                    }
+                });
+
+                map.getSource('geojson')
+                    .setData({
+                        type: "FeatureCollection",
+                        features: []
+                    });
+            });
+        });
+
         t.test('throw before loaded', (t) => {
             const map = createMap(t, {
                 style: {