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>

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 = () => {
 export const MultiSelectBasic = () => {
   const [value, setValue] = useState<Array<SelectableValue<string>>>([]);
   const [value, setValue] = useState<Array<SelectableValue<string>>>([]);
 
 

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -22,7 +22,7 @@ import { SingleValue } from './SingleValue';
 import { MultiValueContainer, MultiValueRemove } from './MultiValue';
 import { MultiValueContainer, MultiValueRemove } from './MultiValue';
 import { useTheme } from '../../themes';
 import { useTheme } from '../../themes';
 import { getSelectStyles } from './getSelectStyles';
 import { getSelectStyles } from './getSelectStyles';
-import { cleanValue } from './utils';
+import { cleanValue, findSelectedValue } from './utils';
 import { SelectBaseProps, SelectValue } from './types';
 import { SelectBaseProps, SelectValue } from './types';
 
 
 interface ExtraValuesIndicatorProps {
 interface ExtraValuesIndicatorProps {
@@ -158,11 +158,7 @@ export function SelectBase<T>({
     // we are selecting the corresponding value from the options
     // we are selecting the corresponding value from the options
     if (isMulti && value && Array.isArray(value) && !loadOptions) {
     if (isMulti && value && Array.isArray(value) && !loadOptions) {
       // @ts-ignore
       // @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) {
     } else if (loadOptions) {
       const hasValue = defaultValue || value;
       const hasValue = defaultValue || value;
       selectedValue = hasValue ? [hasValue] : [];
       selectedValue = hasValue ? [hasValue] : [];