Cascader: Add enable custom value (#21812)

* Add an early exit

* Fix issue with blur and only display label

* Remove unused code

* Enabled custom value

* Update test

* Add custom value creating according to #21869

packages/grafana-ui/src/components/Cascader/Cascader.story.tsx

@@ -47,3 +47,7 @@ export const simple = () => (
 export const withInitialValue = () => (
   <Cascader options={options} initialValue="3" onSelect={val => console.log(val)} />
 );
+
+export const withCustomValue = () => (
+  <Cascader options={options} allowCustomValue initialValue="Custom Initial Value" onSelect={val => console.log(val)} />
+);

packages/grafana-ui/src/components/Cascader/Cascader.test.tsx

@@ -29,18 +29,22 @@ const options = [
 
 const flatOptions = [
   {
+    singleLabel: 'Second',
     label: 'First / Second',
     value: ['1', '2'],
   },
   {
+    singleLabel: 'Third',
     label: 'First / Third',
     value: ['1', '3'],
   },
   {
+    singleLabel: 'Fourth',
     label: 'First / Fourth',
     value: ['1', '4'],
   },
   {
+    singleLabel: 'FirstFirst',
     label: 'FirstFirst',
     value: ['5'],
   },

packages/grafana-ui/src/components/Cascader/Cascader.tsx

@@ -15,6 +15,7 @@ interface CascaderProps {
   onSelect(val: string): void;
   size?: FormInputSize;
   initialValue?: string;
+  allowCustomValue?: boolean;
 }
 
 interface CascaderState {
@@ -64,6 +65,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
       cpy.push(option);
       if (!option.items) {
         selectOptions.push({
+          singleLabel: cpy[cpy.length - 1].label,
           label: cpy.map(o => o.label).join(this.props.separator || ' / '),
           value: cpy.map(o => o.value),
         });
@@ -84,10 +86,13 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
       if (optionPath.indexOf(initValue) === optionPath.length - 1) {
         return {
           rcValue: optionPath,
-          activeLabel: option.label || '',
+          activeLabel: option.singleLabel || '',
         };
       }
     }
+    if (this.props.allowCustomValue) {
+      return { rcValue: [], activeLabel: initValue };
+    }
     return { rcValue: [], activeLabel: '' };
   }
 
@@ -95,7 +100,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
   onChange = (value: string[], selectedOptions: CascaderOption[]) => {
     this.setState({
       rcValue: value,
-      activeLabel: selectedOptions.map(o => o.label).join(this.props.separator || ' / '),
+      activeLabel: selectedOptions[selectedOptions.length - 1].label,
     });
 
     this.props.onSelect(selectedOptions[selectedOptions.length - 1].value);
@@ -103,12 +108,22 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
 
   //For select
   onSelect = (obj: SelectableValue<string[]>) => {
+    const valueArray = obj.value || [];
     this.setState({
-      activeLabel: obj.label || '',
+      activeLabel: obj.singleLabel || '',
-      rcValue: obj.value || [],
+      rcValue: valueArray,
       isSearching: false,
     });
-    this.props.onSelect(this.state.rcValue[this.state.rcValue.length - 1]);
+    this.props.onSelect(valueArray[valueArray.length - 1]);
+  };
+
+  onCreateOption = (value: string) => {
+    this.setState({
+      activeLabel: value,
+      rcValue: [],
+      isSearching: false,
+    });
+    this.props.onSelect(value);
   };
 
   onClick = () => {
@@ -138,47 +153,36 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
 
   onInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (
-      e.key !== 'ArrowDown' &&
+      e.key === 'ArrowDown' ||
-      e.key !== 'ArrowUp' &&
+      e.key === 'ArrowUp' ||
-      e.key !== 'Enter' &&
+      e.key === 'Enter' ||
-      e.key !== 'ArrowLeft' &&
+      e.key === 'ArrowLeft' ||
-      e.key !== 'ArrowRight'
+      e.key === 'ArrowRight'
     ) {
+      return;
+    }
     this.setState({
       focusCascade: false,
       isSearching: true,
     });
-      if (e.key === 'Backspace') {
-        const label = this.state.activeLabel || '';
-        this.setState({
-          activeLabel: label.slice(0, -1),
-        });
-      }
-    }
-  };
-
-  onInputChange = (value: string) => {
-    this.setState({
-      activeLabel: value,
-    });
   };
 
   render() {
-    const { size } = this.props;
+    const { size, allowCustomValue } = this.props;
     const { focusCascade, isSearching, searchableOptions, rcValue, activeLabel } = this.state;
 
     return (
       <div>
         {isSearching ? (
           <Select
-            inputValue={activeLabel}
+            allowCustomValue={allowCustomValue}
             placeholder="Search"
             autoFocus={!focusCascade}
             onChange={this.onSelect}
-            onInputChange={this.onInputChange}
             onBlur={this.onBlur}
             options={searchableOptions}
             size={size || 'md'}
+            onCreateOption={this.onCreateOption}
           />
         ) : (
           <RCCascader