From afe8b08a48acc695e78cc3c5d05b5ba45ad9ffad Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Thu, 13 Feb 2025 15:03:54 +0100
Subject: [PATCH] MultiCombobox: Fix labels disappearing on selected items when
 filtering (#100602)

* Fix label disappearing on filtering

* Remove only from test

* Fix custom value test
---
 .../components/Combobox/MultiCombobox.test.tsx  | 17 +++++++++++++++--
 .../src/components/Combobox/MultiCombobox.tsx   |  4 ++--
 2 files changed, 17 insertions(+), 4 deletions(-)

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(<MultiCombobox width={200} options={options} value={['a']} onChange={jest.fn()} enableAllOption />);
+      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 = <T extends string | number>(props: MultiComboboxPro
       return [];
     }
 
-    return getSelectedItemsFromValue<T>(value, baseOptions);
-  }, [value, baseOptions]);
+    return getSelectedItemsFromValue<T>(value, typeof props.options !== 'function' ? props.options : baseOptions);
+  }, [value, props.options, baseOptions]);
 
   const { measureRef, counterMeasureRef, suffixMeasureRef, shownItems } = useMeasureMulti(
     selectedItems,