diff --git a/packages/grafana-ui/src/components/Combobox/MultiCombobox.test.tsx b/packages/grafana-ui/src/components/Combobox/MultiCombobox.test.tsx
index bee10de6783..5be7bc09098 100644
--- a/packages/grafana-ui/src/components/Combobox/MultiCombobox.test.tsx
+++ b/packages/grafana-ui/src/components/Combobox/MultiCombobox.test.tsx
@@ -156,8 +156,8 @@ describe('MultiCombobox', () => {
await user.type(input, 'D');
await user.keyboard('{arrowdown}{enter}');
expect(onChange).toHaveBeenCalledWith([
- { value: 'a' },
- { value: 'c' },
+ { label: 'A', value: 'a' },
+ { label: 'C', value: 'c' },
{ label: 'D', value: 'D', description: 'Use custom value' },
]);
});
@@ -235,6 +235,19 @@ describe('MultiCombobox', () => {
await user.click(await screen.findByRole('option', { name: 'All' }));
expect(onChange).toHaveBeenCalledWith([]);
});
+
+ it('should keep label names on selected items when searching', async () => {
+ const options = [
+ { label: 'A', value: 'a' },
+ { label: 'B', value: 'b' },
+ { label: 'C', value: 'c' },
+ ];
+ render();
+ const input = screen.getByRole('combobox');
+ await user.click(input);
+ await user.type(input, 'b');
+ expect(screen.getByText('A')).toBeInTheDocument();
+ });
});
describe('async', () => {
diff --git a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
index 9a90dfd4588..7d18074910a 100644
--- a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
+++ b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
@@ -79,8 +79,8 @@ export const MultiCombobox = (props: MultiComboboxPro
return [];
}
- return getSelectedItemsFromValue(value, baseOptions);
- }, [value, baseOptions]);
+ return getSelectedItemsFromValue(value, typeof props.options !== 'function' ? props.options : baseOptions);
+ }, [value, props.options, baseOptions]);
const { measureRef, counterMeasureRef, suffixMeasureRef, shownItems } = useMeasureMulti(
selectedItems,