Annotations: Allow addition of custom values whilst tags are loading (#40702) (#40768)

(cherry picked from commit 447a088750)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

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;

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;

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,