diff --git a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx index cee52571a5b..7040c3b32df 100644 --- a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx +++ b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React from 'react'; import { SelectableValue, deprecationWarning } from '@grafana/data'; // @ts-ignore import { default as ReactSelect } from '@torkelo/react-select'; @@ -24,7 +24,6 @@ import { SingleValue } from './SingleValue'; import { MultiValueContainer, MultiValueRemove } from './MultiValue'; import { useTheme } from '../../../themes'; import { getSelectStyles } from './getSelectStyles'; -import { RefForwardingPortal } from '../../Portal/Portal'; type SelectValue = T | SelectableValue | T[] | Array>; @@ -178,12 +177,10 @@ export function SelectBase({ components, }: SelectBaseProps) { const theme = useTheme(); - const portalRef = useRef(); const styles = getSelectStyles(theme); let ReactSelectComponent: ReactSelect | Creatable = ReactSelect; const creatableProps: any = {}; let asyncSelectProps: any = {}; - let selectedValue = []; if (isMulti && loadOptions) { selectedValue = value as any; @@ -236,7 +233,6 @@ export function SelectBase({ renderControl, captureMenuScroll: false, blurInputOnSelect: true, - menuPortalTarget: portalRef.current, menuPlacement: 'auto', }; @@ -347,6 +343,7 @@ export function SelectBase({ width, position, marginBottom: !!bottom ? '10px' : '0', + zIndex: 9999, }), }} className={widthClass} @@ -354,7 +351,6 @@ export function SelectBase({ {...creatableProps} {...asyncSelectProps} /> - ); }