New Select: Extend creatable select api (#21869)

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()}
       />
     </>

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