From 7e0bc8f30db34c92dcc9ba8cd525903b6504419b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 10 Dec 2018 12:02:27 +0100
Subject: [PATCH] fixed max height issue not being respected by react select
 dropdown

---
 public/app/core/components/Picker/ResetStyles.tsx | 6 ++++--
 public/app/features/explore/Explore.tsx           | 1 +
 public/sass/components/_form_select_box.scss      | 5 +++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/Picker/ResetStyles.tsx b/public/app/core/components/Picker/ResetStyles.tsx
index 2a235b2892a..c34abb544ab 100644
--- a/public/app/core/components/Picker/ResetStyles.tsx
+++ b/public/app/core/components/Picker/ResetStyles.tsx
@@ -1,4 +1,4 @@
-export default {
+export default {
   clearIndicator: () => ({}),
   container: () => ({}),
   control: () => ({}),
@@ -11,7 +11,9 @@
   loadingIndicator: () => ({}),
   loadingMessage: () => ({}),
   menu: () => ({}),
-  menuList: () => ({}),
+  menuList: ({ maxHeight }: { maxHeight: number }) => ({
+    maxHeight,
+  }),
   multiValue: () => ({}),
   multiValueLabel: () => ({}),
   multiValueRemove: () => ({}),
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index b395468313f..4cd8b8f91e0 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -913,6 +913,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                 onChange={this.onChangeDatasource}
                 options={exploreDatasources}
                 styles={ResetStyles}
+                maxMenuHeight={500}
                 placeholder="Select datasource"
                 loadingMessage={() => 'Loading datasources...'}
                 noOptionsMessage={() => 'No datasources found'}
diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index 166baeb2f8f..47dcea3e96b 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -55,6 +55,11 @@ $select-input-bg-disabled: $input-bg-disabled;
   z-index: 2;
 }
 
+.gf-form-select-box__menu-list {
+  overflow-y: auto;
+  max-height: 300px;
+}
+
 .tag-filter .gf-form-select-box__menu {
   width: 100%;
 }