Forms: Allow custom value creation in async select (#21759)

packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx

@@ -6,6 +6,8 @@ import { default as ReactSelect } from '@torkelo/react-select';
 import Creatable from '@torkelo/react-select/creatable';
 import Creatable from '@torkelo/react-select/creatable';
 // @ts-ignore
 // @ts-ignore
 import { default as ReactAsyncSelect } from '@torkelo/react-select/async';
 import { default as ReactAsyncSelect } from '@torkelo/react-select/async';
+// @ts-ignore
+import { default as AsyncCreatable } from '@torkelo/react-select/async-creatable';
 
 
 import { Icon } from '../../Icon/Icon';
 import { Icon } from '../../Icon/Icon';
 import { css, cx } from 'emotion';
 import { css, cx } from 'emotion';
@@ -243,7 +245,7 @@ export function SelectBase<T>({
 
 
   // Instead of having AsyncSelect, as a separate component we render ReactAsyncSelect
   // Instead of having AsyncSelect, as a separate component we render ReactAsyncSelect
   if (loadOptions) {
   if (loadOptions) {
-    ReactSelectComponent = ReactAsyncSelect;
+    ReactSelectComponent = allowCustomValue ? AsyncCreatable : ReactAsyncSelect;
     asyncSelectProps = {
     asyncSelectProps = {
       loadOptions,
       loadOptions,
       defaultOptions,
       defaultOptions,