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,