From aad7d495ecc6110d25998c3da6129a21fb1a76fc Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Wed, 27 Jan 2021 19:10:18 +0200
Subject: [PATCH] Grafana-UI: Fix setting default value for MultiSelect
 (#30671)

* Grafana-ui: Default value to undefned vs empty array

* Grafana-ui: Remove log

* Grafana-ui: Update tests
---
 .../grafana-ui/src/components/Select/SelectBase.tsx    |  4 ++--
 .../grafana-ui/src/components/Select/utils.test.ts     | 10 +++++-----
 packages/grafana-ui/src/components/Select/utils.ts     | 10 ++++------
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index 6468a42b44d..70afab8af75 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -150,7 +150,7 @@ export function SelectBase<T>({
   let ReactSelectComponent: ReactSelect | Creatable = ReactSelect;
   const creatableProps: any = {};
   let asyncSelectProps: any = {};
-  let selectedValue = [];
+  let selectedValue;
   if (isMulti && loadOptions) {
     selectedValue = value as any;
   } else {
@@ -207,7 +207,7 @@ export function SelectBase<T>({
     renderControl,
     showAllSelectedWhenOpen,
     tabSelectsValue,
-    value: isMulti ? selectedValue : selectedValue[0],
+    value: isMulti ? selectedValue : selectedValue?.[0],
   };
 
   if (allowCustomValue) {
diff --git a/packages/grafana-ui/src/components/Select/utils.test.ts b/packages/grafana-ui/src/components/Select/utils.test.ts
index 00cd8adf54f..8a48c413ab2 100644
--- a/packages/grafana-ui/src/components/Select/utils.test.ts
+++ b/packages/grafana-ui/src/components/Select/utils.test.ts
@@ -74,11 +74,11 @@ describe('Select utils', () => {
       expect(cleanValue('test1', optGroup)).toEqual([{ label: 'Group 4 - Option 1', value: 'test1' }]);
       expect(cleanValue(3, options)).toEqual([{ label: 'Option 3', value: 3 }]);
     });
-    it('should return empty array for null/undefined/empty values', () => {
-      expect(cleanValue([undefined], options)).toEqual([]);
-      expect(cleanValue(undefined, options)).toEqual([]);
-      expect(cleanValue(null, options)).toEqual([]);
-      expect(cleanValue('', options)).toEqual([]);
+    it('should return undefined for null/undefined/empty values', () => {
+      expect(cleanValue([undefined], options)).toEqual(undefined);
+      expect(cleanValue(undefined, options)).toEqual(undefined);
+      expect(cleanValue(null, options)).toEqual(undefined);
+      expect(cleanValue('', options)).toEqual(undefined);
     });
   });
 });
diff --git a/packages/grafana-ui/src/components/Select/utils.ts b/packages/grafana-ui/src/components/Select/utils.ts
index daa255722ec..a1615d2fd21 100644
--- a/packages/grafana-ui/src/components/Select/utils.ts
+++ b/packages/grafana-ui/src/components/Select/utils.ts
@@ -4,12 +4,10 @@ import { SelectableOptGroup } from './types';
 /**
  * Normalize the value format to SelectableValue[] | []. Only used for single select
  */
-export const cleanValue = (
-  value: any,
-  options: Array<SelectableValue | SelectableOptGroup | SelectableOptGroup[]>
-): SelectableValue[] | [] => {
+export const cleanValue = (value: any, options: Array<SelectableValue | SelectableOptGroup | SelectableOptGroup[]>) => {
   if (Array.isArray(value)) {
-    return value.filter(Boolean);
+    const filtered = value.filter(Boolean);
+    return filtered?.length ? filtered : undefined;
   }
   if (typeof value === 'object' && value !== null) {
     return [value];
@@ -20,7 +18,7 @@ export const cleanValue = (
       return [selectedValue];
     }
   }
-  return [];
+  return undefined;
 };
 
 /**