From 8587e9fe6cb5e98e8da21dff0915faaee40b3665 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Mon, 14 Dec 2020 15:11:25 +0200
Subject: [PATCH] Grafana-UI: Support optgroup for MultiSelect (#29805)

* Grafana-UI: Support optgroup for MultiSelect

* Update packages/grafana-ui/src/components/Select/Select.story.tsx

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
---
 .../src/components/Select/Select.story.tsx    | 20 +++++++++++++++++++
 .../src/components/Select/SelectBase.tsx      |  8 ++------
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/Select.story.tsx b/packages/grafana-ui/src/components/Select/Select.story.tsx
index d2e5f04b250..472fa74e1a6 100644
--- a/packages/grafana-ui/src/components/Select/Select.story.tsx
+++ b/packages/grafana-ui/src/components/Select/Select.story.tsx
@@ -175,6 +175,26 @@ export const MultiPlainValue = () => {
   );
 };
 
+export const MultiSelectWithOptionGroups = () => {
+  const [value, setValue] = useState<string[]>();
+
+  return (
+    <>
+      <MultiSelect
+        options={[
+          { label: '1', value: '1' },
+          { label: '2', value: '2', options: [{ label: '5', value: '5' }] },
+        ]}
+        value={value}
+        onChange={v => {
+          setValue(v.map((v: any) => v.value));
+        }}
+        {...getDynamicProps()}
+      />
+    </>
+  );
+};
+
 export const MultiSelectBasic = () => {
   const [value, setValue] = useState<Array<SelectableValue<string>>>([]);
 
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index 1170dfd9d89..cd678c08cdc 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -22,7 +22,7 @@ import { SingleValue } from './SingleValue';
 import { MultiValueContainer, MultiValueRemove } from './MultiValue';
 import { useTheme } from '../../themes';
 import { getSelectStyles } from './getSelectStyles';
-import { cleanValue } from './utils';
+import { cleanValue, findSelectedValue } from './utils';
 import { SelectBaseProps, SelectValue } from './types';
 
 interface ExtraValuesIndicatorProps {
@@ -158,11 +158,7 @@ export function SelectBase<T>({
     // we are selecting the corresponding value from the options
     if (isMulti && value && Array.isArray(value) && !loadOptions) {
       // @ts-ignore
-      selectedValue = value.map(v => {
-        return options.filter(o => {
-          return v === o.value || o.value === v.value;
-        })[0];
-      });
+      selectedValue = value.map(v => findSelectedValue(v.value ?? v, options));
     } else if (loadOptions) {
       const hasValue = defaultValue || value;
       selectedValue = hasValue ? [hasValue] : [];