From 249ae05281190ffcf8079a61cc7d791225f1673a Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Fri, 31 Jan 2020 13:47:34 +0100
Subject: [PATCH] New Select: Extend creatable select api (#21869)

---
 .../src/components/Forms/Select/Select.story.tsx       | 10 ++++++++--
 .../src/components/Forms/Select/SelectBase.tsx         |  3 +++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx b/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx
index 14be3595470..3fc5b5097bc 100644
--- a/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx
@@ -247,17 +247,23 @@ export const customizedControl = () => {
 
 export const customValueCreation = () => {
   const [value, setValue] = useState<SelectableValue<string>>();
-
+  const [customOptions, setCustomOptions] = useState<Array<SelectableValue<string>>>([]);
+  const options = generateOptions();
   return (
     <>
       <Select
-        options={generateOptions()}
+        options={[...options, ...customOptions]}
         value={value}
         onChange={v => {
           setValue(v);
         }}
         size="md"
         allowCustomValue
+        onCreateOption={v => {
+          const customValue: SelectableValue<string> = { value: kebabCase(v), label: v };
+          setCustomOptions([...customOptions, customValue]);
+          setValue(customValue);
+        }}
         {...getDynamicProps()}
       />
     </>
diff --git a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx
index fbb2f820719..3aa4933d71a 100644
--- a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx
@@ -35,6 +35,7 @@ export interface SelectCommonProps<T> {
   value?: SelectValue<T>;
   getOptionLabel?: (item: SelectableValue<T>) => string;
   getOptionValue?: (item: SelectableValue<T>) => string;
+  onCreateOption?: (value: string) => void;
   onChange: (value: SelectableValue<T>) => {} | void;
   onInputChange?: (label: string) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
@@ -140,6 +141,7 @@ export function SelectBase<T>({
   defaultValue,
   inputValue,
   onInputChange,
+  onCreateOption,
   options = [],
   onChange,
   onBlur,
@@ -242,6 +244,7 @@ export function SelectBase<T>({
   if (allowCustomValue) {
     ReactSelectComponent = Creatable;
     creatableProps.formatCreateLabel = formatCreateLabel ?? ((input: string) => `Create: ${input}`);
+    creatableProps.onCreateOption = onCreateOption;
   }
 
   // Instead of having AsyncSelect, as a separate component we render ReactAsyncSelect