fixed max height issue not being respected by react select dropdown

public/app/core/components/Picker/ResetStyles.tsx

-export default {
+export default {
   clearIndicator: () => ({}),
   clearIndicator: () => ({}),
   container: () => ({}),
   container: () => ({}),
   control: () => ({}),
   control: () => ({}),
@@ -11,7 +11,9 @@
   loadingIndicator: () => ({}),
   loadingIndicator: () => ({}),
   loadingMessage: () => ({}),
   loadingMessage: () => ({}),
   menu: () => ({}),
   menu: () => ({}),
-  menuList: () => ({}),
+  menuList: ({ maxHeight }: { maxHeight: number }) => ({
+    maxHeight,
+  }),
   multiValue: () => ({}),
   multiValue: () => ({}),
   multiValueLabel: () => ({}),
   multiValueLabel: () => ({}),
   multiValueRemove: () => ({}),
   multiValueRemove: () => ({}),

public/app/features/explore/Explore.tsx

@@ -913,6 +913,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                 onChange={this.onChangeDatasource}
                 onChange={this.onChangeDatasource}
                 options={exploreDatasources}
                 options={exploreDatasources}
                 styles={ResetStyles}
                 styles={ResetStyles}
+                maxMenuHeight={500}
                 placeholder="Select datasource"
                 placeholder="Select datasource"
                 loadingMessage={() => 'Loading datasources...'}
                 loadingMessage={() => 'Loading datasources...'}
                 noOptionsMessage={() => 'No datasources found'}
                 noOptionsMessage={() => 'No datasources found'}

public/sass/components/_form_select_box.scss

@@ -55,6 +55,11 @@ $select-input-bg-disabled: $input-bg-disabled;
   z-index: 2;
   z-index: 2;
 }
 }
 
 
+.gf-form-select-box__menu-list {
+  overflow-y: auto;
+  max-height: 300px;
+}
+
 .tag-filter .gf-form-select-box__menu {
 .tag-filter .gf-form-select-box__menu {
   width: 100%;
   width: 100%;
 }
 }