Select: Fix focus issue and remove select container (#22309)

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<T>({
     menuShouldScrollIntoView: false,
     renderControl,
     captureMenuScroll: false,
-    blurInputOnSelect: true,
     menuPlacement: 'auto',
   };
 
@@ -287,20 +286,6 @@ export function SelectBase<T>({
               {props.children}
             </div>
           ),
-          SelectContainer: (props: any) => (
-            <div
-              {...props.innerProps}
-              className={cx(
-                css(props.getStyles('container', props)),
-                css`
-                  position: relative;
-                `,
-                inputSizes()[size]
-              )}
-            >
-              {props.children}
-            </div>
-          ),
           IndicatorsContainer: IndicatorsContainer,
           IndicatorSeparator: () => <></>,
           Control: CustomControl,
@@ -348,6 +333,10 @@ export function SelectBase<T>({
             marginBottom: !!bottom ? '10px' : '0',
             zIndex: 9999,
           }),
+          container: () => ({
+            position: 'relative',
+            width: inputSizesPixels(size),
+          }),
         }}
         className={widthClass}
         {...commonSelectProps}

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':