From 81a13189b0407acdaae94e8fb4e037131c85c11f Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Wed, 8 Mar 2023 15:37:23 +0100
Subject: [PATCH] fix(dashboard): Infinite load when filter with default first
 value is out of scope (#23299)

---
 .../FilterBar/FilterControls/FilterControls.tsx            | 7 +++++++
 .../FilterBar/FiltersDropdownContent/index.tsx             | 3 +++
 .../FilterBar/FiltersOutOfScopeCollapsible/index.tsx       | 3 +++
 3 files changed, 13 insertions(+)

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 fa0bfeac6f22a..83ed357382557 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -94,6 +94,11 @@ const FilterControls: FC<FilterControlsProps> = ({
   const [filtersInScope, filtersOutOfScope] =
     useSelectFiltersInScope(filtersWithValues);
 
+  const hasRequiredFirst = useMemo(
+    () => filtersWithValues.some(filter => filter.requiredFirst),
+    [filtersWithValues],
+  );
+
   const dashboardHasTabs = useDashboardHasTabs();
   const showCollapsePanel = dashboardHasTabs && filtersWithValues.length > 0;
 
@@ -119,6 +124,7 @@ const FilterControls: FC<FilterControlsProps> = ({
       {showCollapsePanel && (
         <FiltersOutOfScopeCollapsible
           filtersOutOfScope={filtersOutOfScope}
+          forceRender={hasRequiredFirst}
           hasTopMargin={filtersInScope.length > 0}
           renderer={renderer}
         />
@@ -200,6 +206,7 @@ const FilterControls: FC<FilterControlsProps> = ({
                   filtersOutOfScope={filtersOutOfScope}
                   renderer={renderer}
                   showCollapsePanel={showCollapsePanel}
+                  forceRenderOutOfScope={hasRequiredFirst}
                 />
               )
             : undefined
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx
index 84710c94b5f09..41e093daec91c 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx
@@ -26,6 +26,7 @@ export interface FiltersDropdownContentProps {
   filtersOutOfScope: (Filter | Divider)[];
   renderer: (filter: Filter | Divider, index: number) => ReactNode;
   showCollapsePanel?: boolean;
+  forceRenderOutOfScope?: boolean;
 }
 
 export const FiltersDropdownContent = ({
@@ -33,6 +34,7 @@ export const FiltersDropdownContent = ({
   filtersOutOfScope,
   renderer,
   showCollapsePanel,
+  forceRenderOutOfScope,
 }: FiltersDropdownContentProps) => (
   <div
     css={(theme: SupersetTheme) =>
@@ -47,6 +49,7 @@ export const FiltersDropdownContent = ({
       <FiltersOutOfScopeCollapsible
         filtersOutOfScope={filtersOutOfScope}
         renderer={renderer}
+        forceRender={forceRenderOutOfScope}
         horizontalOverflow
       />
     )}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx
index a85f1907322c1..82b0daeff9fd7 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx
@@ -26,6 +26,7 @@ export interface FiltersOutOfScopeCollapsibleProps {
   renderer: (filter: Filter | Divider, index: number) => ReactNode;
   hasTopMargin?: boolean;
   horizontalOverflow?: boolean;
+  forceRender?: boolean;
 }
 
 export const FiltersOutOfScopeCollapsible = ({
@@ -33,6 +34,7 @@ export const FiltersOutOfScopeCollapsible = ({
   renderer,
   hasTopMargin,
   horizontalOverflow,
+  forceRender = false,
 }: FiltersOutOfScopeCollapsibleProps) => (
   <AntdCollapse
     ghost
@@ -80,6 +82,7 @@ export const FiltersOutOfScopeCollapsible = ({
     }
   >
     <AntdCollapse.Panel
+      forceRender={forceRender}
       header={t('Filters out of scope (%d)', filtersOutOfScope.length)}
       key="1"
     >