diff --git a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx index 4928397b76b..f8fa91e7479 100644 --- a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx +++ b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx @@ -11,7 +11,7 @@ import { default as AsyncCreatable } from '@torkelo/react-select/async-creatable import { Icon } from '../../Icon/Icon'; import { css, cx } from 'emotion'; -import { inputSizes } from '../commonStyles'; +import { inputSizesPixels } from '../commonStyles'; import { FormInputSize } from '../types'; import resetSelectStyles from './resetSelectStyles'; import { SelectMenu, SelectMenuOptions } from './SelectMenu'; @@ -235,7 +235,6 @@ export function SelectBase({ menuShouldScrollIntoView: false, renderControl, captureMenuScroll: false, - blurInputOnSelect: true, menuPlacement: 'auto', }; @@ -287,20 +286,6 @@ export function SelectBase({ {props.children} ), - SelectContainer: (props: any) => ( -
- {props.children} -
- ), IndicatorsContainer: IndicatorsContainer, IndicatorSeparator: () => <>, Control: CustomControl, @@ -348,6 +333,10 @@ export function SelectBase({ marginBottom: !!bottom ? '10px' : '0', zIndex: 9999, }), + container: () => ({ + position: 'relative', + width: inputSizesPixels(size), + }), }} className={widthClass} {...commonSelectProps} diff --git a/packages/grafana-ui/src/components/Forms/commonStyles.ts b/packages/grafana-ui/src/components/Forms/commonStyles.ts index b97e93588f6..48e64dc60ae 100644 --- a/packages/grafana-ui/src/components/Forms/commonStyles.ts +++ b/packages/grafana-ui/src/components/Forms/commonStyles.ts @@ -57,20 +57,34 @@ export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => { export const inputSizes = () => { return { sm: css` - width: 200px; + width: ${inputSizesPixels('sm')}; `, md: css` - width: 320px; + width: ${inputSizesPixels('md')}; `, lg: css` - width: 580px; + width: ${inputSizesPixels('lg')}; `, auto: css` - width: auto; + width: ${inputSizesPixels('auto')}; `, }; }; +export const inputSizesPixels = (size: string) => { + switch (size) { + case 'sm': + return '200px'; + case 'md': + return '320px'; + case 'lg': + return '580px'; + case 'auto': + default: + return 'auto'; + } +}; + export const getPropertiesForButtonSize = (theme: GrafanaTheme, size: ButtonSize) => { switch (size) { case 'sm':