UnitPicker: show custom units on load (#21397)

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

@@ -26,15 +26,23 @@ export class UnitPicker extends PureComponent<Props> {
   render() {
     const { value, width } = this.props;
 
+    // Set the current selection
+    let current: SelectableValue<string> | undefined = undefined;
+
+    // All units
     const unitGroups = getValueFormats();
 
     // Need to transform the data structure to work well with Select
     const groupOptions = unitGroups.map(group => {
       const options = group.submenu.map(unit => {
-        return {
+        const sel = {
           label: unit.text,
           value: unit.value,
         };
+        if (unit.value === value) {
+          current = sel;
+        }
+        return sel;
       });
 
       return {
@@ -43,14 +51,15 @@ export class UnitPicker extends PureComponent<Props> {
       };
     });
 
-    const valueOption = groupOptions.map(group => {
-      return group.options.find(option => option.value === value);
-    });
+    // Show the custom unit
+    if (value && !current) {
+      current = { value, label: value };
+    }
 
     return (
       <Select
         width={width}
-        defaultValue={valueOption}
+        defaultValue={current}
         isSearchable={true}
         allowCustomValue={true}
         formatCreateLabel={formatCreateLabel}