fix: Reordering native filters ignored by filter bar (apache#22362)

(cherry picked from commit da64fa2)
preset-io · Dec 10, 2022 · 57c7a44 · 57c7a44
1 parent aab1d0e
commit 57c7a44
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx b/superset-frontend/src/components/DropdownContainer/index.tsx
@@ -358,6 +358,7 @@ const DropdownContainer = forwardRef(
               visible={popoverVisible}
               onVisibleChange={visible => setPopoverVisible(visible)}
               placement="bottom"
+              destroyTooltipOnHide
             >
               <Button
                 buttonStyle="secondary"

diff --git a/...ontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/...ontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -98,14 +98,15 @@ const FilterControls: FC<FilterControlsProps> = ({
   const showCollapsePanel = dashboardHasTabs && filtersWithValues.length > 0;
 
   const renderer = useCallback(
-    ({ id }: Filter | Divider) => {
-      const index = filtersWithValues.findIndex(f => f.id === id);
+    ({ id }: Filter | Divider, index: number | undefined) => {
+      const filterIndex = filtersWithValues.findIndex(f => f.id === id);
+      const key = index ?? id;
       return (
         // Empty text node is to ensure there's always an element preceding
         // the OutPortal, otherwise react-reverse-portal crashes
-        <React.Fragment key={id}>
+        <React.Fragment key={key}>
           {'' /* eslint-disable-line react/jsx-curly-brace-presence */}
-          <OutPortal node={portalNodes[index]} inView />
+          <OutPortal node={portalNodes[filterIndex]} inView />
         </React.Fragment>
       );
     },
@@ -127,7 +128,7 @@ const FilterControls: FC<FilterControlsProps> = ({
 
   const items = useMemo(
     () =>
-      filtersInScope.map(filter => ({
+      filtersInScope.map((filter, index) => ({
         id: filter.id,
         element: (
           <div
@@ -136,7 +137,7 @@ const FilterControls: FC<FilterControlsProps> = ({
               flex-shrink: 0;
             `}
           >
-            {renderer(filter)}
+            {renderer(filter, index)}
           </div>
         ),
       })),

diff --git a/...rontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx b/...rontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx
@@ -24,7 +24,7 @@ import { FiltersOutOfScopeCollapsible } from '../FiltersOutOfScopeCollapsible';
 export interface FiltersDropdownContentProps {
   filtersInScope: (Filter | Divider)[];
   filtersOutOfScope: (Filter | Divider)[];
-  renderer: (filter: Filter | Divider) => ReactNode;
+  renderer: (filter: Filter | Divider, index: number) => ReactNode;
   showCollapsePanel?: boolean;
 }
 

diff --git a/...d/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx b/...d/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx
@@ -23,7 +23,7 @@ import { AntdCollapse } from 'src/components';
 
 export interface FiltersOutOfScopeCollapsibleProps {
   filtersOutOfScope: (Filter | Divider)[];
-  renderer: (filter: Filter | Divider) => ReactNode;
+  renderer: (filter: Filter | Divider, index: number) => ReactNode;
   hasTopMargin?: boolean;
   horizontalOverflow?: boolean;
 }