diff --git a/web/client/api/WMS.js b/web/client/api/WMS.js
index 94f3e05aac..32fa256465 100644
--- a/web/client/api/WMS.js
+++ b/web/client/api/WMS.js
@@ -10,7 +10,7 @@ import urlUtil from 'url';
 import { isArray, castArray, get } from 'lodash';
 import xml2js from 'xml2js';
 import axios from '../libs/ajax';
-import ConfigUtils, { getConfigProp } from '../utils/ConfigUtils';
+import { getConfigProp } from '../utils/ConfigUtils';
 import { getWMSBoundingBox } from '../utils/CoordinatesUtils';
 import { isValidGetMapFormat, isValidGetFeatureInfoFormat } from '../utils/WMSUtils';
 const capabilitiesCache = {};
@@ -321,30 +321,14 @@ export const getSupportedFormat = (url, includeGFIFormats = false) => {
         .catch(() => includeGFIFormats ? { imageFormats: [], infoFormats: [] } : []);
 };
 
-let layerLegendJsonData = {};
 export const getJsonWMSLegend = (url) => {
-    let request;
-
-    // enables caching of the JSON legend for a specified duration,
-    // while providing the possibility of re-fetching the legend data in case of external modifications
-    const cached = layerLegendJsonData[url];
-    if (cached && new Date().getTime() < cached.timestamp + (ConfigUtils.getConfigProp('cacheExpire') || 60) * 1000) {
-        request = () => Promise.resolve(cached.data);
-    } else {
-        request = () => axios.get(url).then((response) => {
+    return axios.get(url)
+        .then((response) => {
             if (typeof response?.data === 'string' && response.data.includes("Exception")) {
                 throw new Error("Faild to get json legend");
             }
-            layerLegendJsonData[url] = {
-                timestamp: new Date().getTime(),
-                data: response?.data?.Legend
-            };
             return response?.data?.Legend || [];
-        });
-    }
-    return request().then((data) => data).catch(err => {
-        throw err;
-    });
+        }).catch(err => { throw err; });
 };
 
 const Api = {
diff --git a/web/client/epics/__tests__/styleeditor-test.js b/web/client/epics/__tests__/styleeditor-test.js
index 4204d8910d..11eea235cc 100644
--- a/web/client/epics/__tests__/styleeditor-test.js
+++ b/web/client/epics/__tests__/styleeditor-test.js
@@ -56,6 +56,7 @@ import { testEpic } from './epicTestUtils';
 
 import MockAdapter from 'axios-mock-adapter';
 import axios from '../../libs/ajax';
+import { INTERACTIVE_LEGEND_ID } from '../../utils/LegendUtils';
 
 let mockAxios;
 
@@ -474,7 +475,11 @@ describe('Test styleeditor epics', () => {
                         name: 'layerName',
                         url: 'base/web/client/test-resources/geoserver/',
                         describeFeatureType: {},
-                        style: 'test_style'
+                        style: 'test_style',
+                        layerFilter: {
+                            filters: [{id: INTERACTIVE_LEGEND_ID, "test": "test"}]
+                        },
+                        enableInteractiveLegend: true
                     }
                 ],
                 selected: [
@@ -503,6 +508,7 @@ describe('Test styleeditor epics', () => {
                     case UPDATE_SETTINGS_PARAMS:
                         const styleName = action.newParams.style.split('___');
                         expect(styleName[0]).toBe('style_title');
+                        expect(action.newParams.layerFilter).toBeTruthy();
                         expect(action.update).toBe(true);
                         break;
                     case UPDATE_STATUS:
@@ -568,6 +574,7 @@ describe('Test styleeditor epics', () => {
                     case UPDATE_SETTINGS_PARAMS:
                         const styleName = action.newParams.style.split('___');
                         expect(styleName[0]).toBe(`${workspace}:style_title`);
+                        expect(action.newParams.layerFilter).toBeFalsy();
                         expect(action.update).toBe(true);
                         break;
                     case UPDATE_STATUS:
diff --git a/web/client/epics/styleeditor.js b/web/client/epics/styleeditor.js
index 81ee11b6b7..3ce815e77d 100644
--- a/web/client/epics/styleeditor.js
+++ b/web/client/epics/styleeditor.js
@@ -60,6 +60,7 @@ import { getSelectedLayer, layerSettingSelector } from '../selectors/layers';
 import { generateTemporaryStyleId, generateStyleId, STYLE_OWNER_NAME, getNameParts, detectStyleCodeChanges } from '../utils/StyleEditorUtils';
 import { updateStyleService } from '../api/StyleEditor';
 import { getDefaultUrl } from '../utils/URLUtils';
+import { resetLayerLegendFilter } from '../utils/FilterUtils';
 
 /*
  * Observable to get code of a style, it works only in edit status
@@ -528,6 +529,7 @@ export const createStyleEpic = (action$, store) =>
             const format = formatStyleSelector(state);
             const { title = '', _abstract = '' } = action.settings || {};
             const { baseUrl = '' } = styleServiceSelector(state);
+            const layerFilter = resetLayerLegendFilter(layer, 'style', styleName);
 
             const editorMetadata = {
                 msStyleJSON: null,
@@ -559,7 +561,7 @@ export const createStyleEpic = (action$, store) =>
             )
                 .switchMap(() => Rx.Observable.of(
                     updateOptionsByOwner(STYLE_OWNER_NAME, [{}]),
-                    updateSettingsParams({style: styleName || ''}, true),
+                    updateSettingsParams({ ...(layerFilter && {layerFilter}), style: styleName || ''}, true),
                     updateStatus(''),
                     loadedStyle())
                     .merge(
@@ -637,7 +639,8 @@ export const updateStyleCodeEpic = (action$, store) =>
                         'layer',
                         {
                             _v_: Date.now(),
-                            availableStyles
+                            availableStyles,
+                            styleVersion: `${styleName}-${Date.now()}`
                         }),
                     updateSettingsParams({
                         availableStyles
diff --git a/web/client/plugins/TOC/components/StyleBasedWMSJsonLegend.jsx b/web/client/plugins/TOC/components/StyleBasedWMSJsonLegend.jsx
index 0bac5e6f36..f23be58a8f 100644
--- a/web/client/plugins/TOC/components/StyleBasedWMSJsonLegend.jsx
+++ b/web/client/plugins/TOC/components/StyleBasedWMSJsonLegend.jsx
@@ -71,11 +71,15 @@ class StyleBasedWMSJsonLegend extends React.Component {
         const prevLayerStyle = prevProps?.layer?.style;
         const currentLayerStyle = this.props?.layer?.style;
 
+        const prevLayerStyleVersion = prevProps?.layer?.styleVersion;
+        const currLayerStyleVersion = this.props?.layer?.styleVersion;
+
         const [prevFilter, currFilter] = [prevProps?.layer, this.props?.layer]
             .map(_layer => getLayerFilterByLegendFormat(_layer, LEGEND_FORMAT.JSON));
 
         // get the new json legend and rerender in case of change in style or layer filter
         if (!isEqual(prevLayerStyle, currentLayerStyle)
+            || !isEqual(prevLayerStyleVersion, currLayerStyleVersion)
             || !isEqual(prevFilter, currFilter)
             || !isEqual(prevProps.mapBbox, this.props.mapBbox)
         ) {