From 1554dcee0da35a4e06e25deca088b6a7e8ef4ade Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Sun, 9 Feb 2020 17:02:07 +0100
Subject: [PATCH] Cascader: Fix issue where the dropdown wouldn't show (#22045)

* Fix z-index on cascader

* Cleanup

* Remove unused import
---
 packages/grafana-ui/src/components/Cascader/Cascader.tsx      | 4 ++++
 .../src/components/ThresholdsEditor/ThresholdsEditor.test.tsx | 3 +--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
index 8f29db1cc43..718086739fc 100644
--- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx
+++ b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
@@ -198,6 +198,10 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
             value={rcValue}
             fieldNames={{ label: 'label', value: 'value', children: 'items' }}
             expandIcon={null}
+            // Required, otherwise the portal that the popup is shown in will render under other components
+            popupClassName={css`
+              z-index: 9999;
+            `}
           >
             <div className={disableDivFocus}>
               <Input
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
index b0479203a49..98e822ea074 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -1,13 +1,12 @@
 import React, { ChangeEvent } from 'react';
 import { mount } from 'enzyme';
-import { GrafanaThemeType, GrafanaTheme, ThresholdsMode } from '@grafana/data';
+import { GrafanaThemeType, ThresholdsMode } from '@grafana/data';
 import { ThresholdsEditor, Props, thresholdsWithoutKey } from './ThresholdsEditor';
 import { colors } from '../../utils';
 import { mockThemeContext } from '../../themes/ThemeContext';
 
 const setup = (propOverrides?: Partial<Props>) => {
   const props: Props = {
-    theme: { type: GrafanaThemeType.Dark, isDark: true, isLight: false } as GrafanaTheme,
     onChange: jest.fn(),
     thresholds: { mode: ThresholdsMode.Absolute, steps: [] },
   };