From f94c6d27635d58ad136626340423988465abbec5 Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Thu, 3 Jun 2021 12:04:23 +0300
Subject: [PATCH] fix(native-filters): cascading filters not rendering in tab
 (#14964)

---
 .../FilterControls/FilterControls.tsx         | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
index ab8233c1fc..ded4b1ff21 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -72,6 +72,7 @@ const FilterControls: FC<FilterControlsProps> = ({
     }));
     return buildCascadeFiltersTree(filtersWithValue);
   }, [filterValues, dataMaskSelected]);
+  const cascadeFilterIds = new Set(cascadeFilters.map(item => item.id));
 
   let filtersInScope: CascadeFilter[] = [];
   const filtersOutOfScope: CascadeFilter[] = [];
@@ -93,23 +94,25 @@ const FilterControls: FC<FilterControlsProps> = ({
 
   return (
     <Wrapper>
-      {portalNodes.map((node, index) => (
-        <portals.InPortal node={node}>
-          <CascadePopover
-            data-test="cascade-filters-control"
-            key={cascadeFilters[index].id}
-            visible={visiblePopoverId === cascadeFilters[index].id}
-            onVisibleChange={visible =>
-              setVisiblePopoverId(visible ? cascadeFilters[index].id : null)
-            }
-            filter={cascadeFilters[index]}
-            onFilterSelectionChange={onFilterSelectionChange}
-            directPathToChild={directPathToChild}
-          />
-        </portals.InPortal>
-      ))}
+      {portalNodes
+        .filter((node, index) => cascadeFilterIds.has(filterValues[index].id))
+        .map((node, index) => (
+          <portals.InPortal node={node}>
+            <CascadePopover
+              data-test="cascade-filters-control"
+              key={cascadeFilters[index].id}
+              visible={visiblePopoverId === cascadeFilters[index].id}
+              onVisibleChange={visible =>
+                setVisiblePopoverId(visible ? cascadeFilters[index].id : null)
+              }
+              filter={cascadeFilters[index]}
+              onFilterSelectionChange={onFilterSelectionChange}
+              directPathToChild={directPathToChild}
+            />
+          </portals.InPortal>
+        ))}
       {filtersInScope.map(filter => {
-        const index = cascadeFilters.findIndex(f => f.id === filter.id);
+        const index = filterValues.findIndex(f => f.id === filter.id);
         return <portals.OutPortal node={portalNodes[index]} />;
       })}
       {showCollapsePanel && (