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({ allowCustomValue = false, + allowCreateWhileLoading = false, 'aria-label': ariaLabel, autoFocus = false, backspaceRemovesValue = true, @@ -227,6 +228,7 @@ export function SelectBase({ 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 { /** 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 = ({ const value = tags.map((tag) => ({ value: tag, label: tag, count: 0 })); const selectOptions = { + allowCreateWhileLoading: true, allowCustomValue, formatCreateLabel, defaultOptions: true,