Commit 8587e9fe by Alex Khomenko Committed by GitHub

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>
parent 98c0b095
...@@ -175,6 +175,26 @@ export const MultiPlainValue = () => { ...@@ -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>>>([]);
......
...@@ -22,7 +22,7 @@ import { SingleValue } from './SingleValue'; ...@@ -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>({ ...@@ -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 => { selectedValue = value.map(v => findSelectedValue(v.value ?? v, options));
return options.filter(o => {
return v === o.value || o.value === v.value;
})[0];
});
} else if (loadOptions) { } else if (loadOptions) {
const hasValue = defaultValue || value; const hasValue = defaultValue || value;
selectedValue = hasValue ? [hasValue] : []; selectedValue = hasValue ? [hasValue] : [];
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment