Added custom scrollbar to select component

public/app/core/components/CustomScrollbar/CustomScrollbar.tsx

@@ -28,8 +28,8 @@ class CustomScrollbar extends PureComponent<Props> {
       <Scrollbars
       <Scrollbars
         className={customClassName}
         className={customClassName}
         autoHeight={true}
         autoHeight={true}
-        autoHeightMin={'100%'}
-        autoHeightMax={'100%'}
+        autoHeightMin={'inherit'}
+        autoHeightMax={'inherit'}
         renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
         renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
         renderTrackVertical={props => <div {...props} className="track-vertical" />}
         renderTrackVertical={props => <div {...props} className="track-vertical" />}
         renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
         renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}

public/app/core/components/Select/Select.tsx

@@ -3,12 +3,14 @@ import classNames from 'classnames';
 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 import { default as ReactSelect } from 'react-select';
 import { default as ReactSelect } from 'react-select';
 import { default as ReactAsyncSelect } from 'react-select/lib/Async';
 import { default as ReactAsyncSelect } from 'react-select/lib/Async';
+import { components } from 'react-select';
 
 
 // Components
 // Components
 import { Option, SingleValue } from './PickerOption';
 import { Option, SingleValue } from './PickerOption';
 import IndicatorsContainer from './IndicatorsContainer';
 import IndicatorsContainer from './IndicatorsContainer';
 import NoOptionsMessage from './NoOptionsMessage';
 import NoOptionsMessage from './NoOptionsMessage';
 import ResetStyles from './ResetStyles';
 import ResetStyles from './ResetStyles';
+import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
 
 
 export interface SelectOptionItem {
 export interface SelectOptionItem {
   label?: string;
   label?: string;
@@ -51,6 +53,14 @@ interface AsyncProps {
   loadingMessage?: () => string;
   loadingMessage?: () => string;
 }
 }
 
 
+export const MenuList = props => {
+  return (
+    <components.MenuList {...props}>
+      <CustomScrollbar autoHide={false}>{props.children}</CustomScrollbar>
+    </components.MenuList>
+  );
+};
+
 export class Select extends PureComponent<CommonProps & SelectProps> {
 export class Select extends PureComponent<CommonProps & SelectProps> {
   static defaultProps = {
   static defaultProps = {
     width: null,
     width: null,
@@ -106,6 +116,7 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
           Option,
           Option,
           SingleValue,
           SingleValue,
           IndicatorsContainer,
           IndicatorsContainer,
+          MenuList,
         }}
         }}
         defaultValue={defaultValue}
         defaultValue={defaultValue}
         value={value}
         value={value}

public/sass/components/_form_select_box.scss

@@ -79,6 +79,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 .gf-form-select-box__option {
 .gf-form-select-box__option {
   border-left: 2px solid transparent;
   border-left: 2px solid transparent;
   white-space: nowrap;
   white-space: nowrap;
+  background-color: $input-bg;
 
 
   &.gf-form-select-box__option--is-focused {
   &.gf-form-select-box__option--is-focused {
     color: $dropdownLinkColorHover;
     color: $dropdownLinkColorHover;