From d3f9ec7231529bd7d849cea14841df14517a6231 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 21 Oct 2021 15:22:51 +0100
Subject: [PATCH] Annotations: Allow addition of custom values whilst tags are
 loading (#40702) (#40768)

(cherry picked from commit 447a088750b1513a97424ddd619080575a62ae02)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 packages/grafana-ui/src/components/Select/SelectBase.tsx | 2 ++
 packages/grafana-ui/src/components/Select/types.ts       | 1 +
 public/app/core/components/TagFilter/TagFilter.tsx       | 1 +
 3 files changed, 4 insertions(+)

diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index 5fcdf98833e..218ebf9f989 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -88,6 +88,7 @@ const CustomControl = (props: any) => {
 
 export function SelectBase<T>({
   allowCustomValue = false,
+  allowCreateWhileLoading = false,
   'aria-label': ariaLabel,
   autoFocus = false,
   backspaceRemovesValue = true,
@@ -227,6 +228,7 @@ export function SelectBase<T>({
 
   if (allowCustomValue) {
     ReactSelectComponent = Creatable as any;
+    creatableProps.allowCreateWhileLoading = allowCreateWhileLoading;
     creatableProps.formatCreateLabel = formatCreateLabel ?? ((input: string) => `Create: ${input}`);
     creatableProps.onCreateOption = onCreateOption;
     creatableProps.isValidNewOption = isValidNewOption;
diff --git a/packages/grafana-ui/src/components/Select/types.ts b/packages/grafana-ui/src/components/Select/types.ts
index 6da83a58e63..094d755f96a 100644
--- a/packages/grafana-ui/src/components/Select/types.ts
+++ b/packages/grafana-ui/src/components/Select/types.ts
@@ -9,6 +9,7 @@ export type InputActionMeta = {
 export interface SelectCommonProps<T> {
   /** Aria label applied to the input field */
   ['aria-label']?: string;
+  allowCreateWhileLoading?: boolean;
   allowCustomValue?: boolean;
   /** Focus is set to the Select when rendered*/
   autoFocus?: boolean;
diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx
index 3780b8da72c..e0761c722ff 100644
--- a/public/app/core/components/TagFilter/TagFilter.tsx
+++ b/public/app/core/components/TagFilter/TagFilter.tsx
@@ -68,6 +68,7 @@ export const TagFilter: FC<Props> = ({
   const value = tags.map((tag) => ({ value: tag, label: tag, count: 0 }));
 
   const selectOptions = {
+    allowCreateWhileLoading: true,
     allowCustomValue,
     formatCreateLabel,
     defaultOptions: true,