fix(dashboard): Show the filters popover behind the dashboard header …

…when scrolling (#15933) * Fix z-index * Fix z-index dropdown and maximized chart filters
apache · Jul 29, 2021 · 56dd2a3 · 56dd2a3
1 parent ac9c137
commit 56dd2a3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
@@ -232,13 +232,11 @@ export const TextArea = styled(AntdInput.TextArea)`
   border-radius: ${({ theme }) => theme.borderRadius}px;
 `;
 
+// @z-index-below-dashboard-header (100) - 1 = 99
 export const NoAnimationDropdown = (
   props: DropDownProps & { children?: React.ReactNode },
 ) => (
-  <Dropdown
-    overlayStyle={{ zIndex: 4000, animationDuration: '0s' }}
-    {...props}
-  />
+  <Dropdown overlayStyle={{ zIndex: 99, animationDuration: '0s' }} {...props} />
 );
 
 export const ThinSkeleton = styled(Skeleton)`

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -19,7 +19,7 @@
 /* eslint-env browser */
 import cx from 'classnames';
 import React, { FC } from 'react';
-import { JsonObject, styled } from '@superset-ui/core';
+import { JsonObject, styled, css } from '@superset-ui/core';
 import ErrorBoundary from 'src/components/ErrorBoundary';
 import BuilderComponentPane from 'src/dashboard/components/BuilderComponentPane';
 import DashboardHeader from 'src/dashboard/containers/DashboardHeader';
@@ -48,6 +48,7 @@ import {
 } from 'src/dashboard/util/constants';
 import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar';
 import Loading from 'src/components/Loading';
+import { Global } from '@emotion/react';
 import { shouldFocusTabs, getRootLevelTabsComponent } from './utils';
 import DashboardContainer from './DashboardContainer';
 import { useNativeFilters } from './state';
@@ -83,21 +84,22 @@ const StickyPanel = styled.div<{ width: number }>`
   flex: 0 0 ${({ width }) => width}px;
 `;
 
-// @z-index-above-dashboard-charts + 1 = 11
+// @z-index-above-dashboard-popovers (99) + 1 = 100
 const StyledHeader = styled.div`
   grid-column: 2;
   grid-row: 1;
   position: sticky;
   top: 0px;
-  z-index: 11;
+  z-index: 100;
 `;
 
 const StyledContent = styled.div<{
   fullSizeChartId: number | null;
 }>`
   grid-column: 2;
   grid-row: 2;
-  ${({ fullSizeChartId }) => fullSizeChartId && `z-index: 1000;`}
+  // @z-index-above-dashboard-header (100) + 1 = 101
+  ${({ fullSizeChartId }) => fullSizeChartId && `z-index: 101;`}
 `;
 
 const StyledDashboardContent = styled.div<{
@@ -283,6 +285,13 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
         </DragDroppable>
       </StyledHeader>
       <StyledContent fullSizeChartId={fullSizeChartId}>
+        <Global
+          styles={css`
+            // @z-index-above-dashboard-header (100) + 1 = 101
+            ${fullSizeChartId &&
+            `div > .filterStatusPopover.ant-popover{z-index: 101}`}
+          `}
+        />
         <div
           data-test="dashboard-content"
           className={cx('dashboard', editMode && 'dashboard--editing')}