From 3456dd571ca705699766473e55ededd36c6f4dc7 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Fri, 11 Jun 2021 02:11:31 +0200
Subject: [PATCH] fix(native-filters): fix Select filter crashing when changing
 filter type (#15090)

---
 .../nativeFilters/FilterBar/index.tsx           | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
index 631179b89..79b104bd7 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
@@ -24,6 +24,7 @@ import { useDispatch } from 'react-redux';
 import cx from 'classnames';
 import Icon from 'src/components/Icon';
 import { Tabs } from 'src/common/components';
+import { usePrevious } from 'src/common/hooks/usePrevious';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import { updateDataMask } from 'src/dataMask/actions';
 import { DataMaskStateWithId, DataMaskWithId } from 'src/dataMask/types';
@@ -164,6 +165,7 @@ const FilterBar: React.FC<FiltersBarProps> = ({
   const filterSetFilterValues = Object.values(filterSets);
   const [tab, setTab] = useState(TabIds.AllFilters);
   const filters = useFilters();
+  const previousFilters = usePrevious(filters);
   const filterValues = Object.values<Filter>(filters);
   const dataMaskApplied: DataMaskStateWithId = useNativeFiltersDataMask();
   const [isFilterSetChanged, setIsFilterSetChanged] = useState(false);
@@ -172,6 +174,21 @@ const FilterBar: React.FC<FiltersBarProps> = ({
     setDataMaskSelected(() => dataMaskApplied);
   }, [JSON.stringify(dataMaskApplied), setDataMaskSelected]);
 
+  // reset filter state if filter type changes
+  useEffect(() => {
+    setDataMaskSelected(draft => {
+      Object.values(filters).forEach(filter => {
+        if (filter.filterType !== previousFilters?.[filter.id]?.filterType) {
+          draft[filter.id] = getInitialDataMask(filter.id) as DataMaskWithId;
+        }
+      });
+    });
+  }, [
+    JSON.stringify(filters),
+    JSON.stringify(previousFilters),
+    setDataMaskSelected,
+  ]);
+
   const handleFilterSelectionChange = (
     filter: Pick<Filter, 'id'> & Partial<Filter>,
     dataMask: Partial<DataMask>,