From 03f89a1925608cf46c201a446192be5f98d211c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Wed, 29 Jan 2025 15:02:53 +0100
Subject: [PATCH] MultiCombobox: Show `placeholder` when there is no options
 selected (#99743)

---
 .../src/components/Combobox/MultiCombobox.test.tsx    | 11 +++++++++++
 .../src/components/Combobox/MultiCombobox.tsx         |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Combobox/MultiCombobox.test.tsx b/packages/grafana-ui/src/components/Combobox/MultiCombobox.test.tsx
index 66444644ca461..8ed509b26dbff 100644
--- a/packages/grafana-ui/src/components/Combobox/MultiCombobox.test.tsx
+++ b/packages/grafana-ui/src/components/Combobox/MultiCombobox.test.tsx
@@ -61,6 +61,17 @@ describe('MultiCombobox', () => {
     expect(screen.getByPlaceholderText('Select')).toBeInTheDocument();
   });
 
+  it('should not render with placeholder when options selected', async () => {
+    const options = [
+      { label: 'A', value: 'a' },
+      { label: 'B', value: 'b' },
+      { label: 'C', value: 'c' },
+    ];
+    render(<MultiCombobox options={options} value={['a']} onChange={jest.fn()} placeholder="Select" />);
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveAttribute('placeholder', '');
+  });
+
   it.each([
     ['a', 'b', 'c'],
     [1, 2, 3],
diff --git a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
index 104f638de6043..1d5ab5bd6d8da 100644
--- a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
+++ b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
@@ -276,7 +276,7 @@ export const MultiCombobox = <T extends string | number>(props: MultiComboboxPro
               getDropdownProps({
                 disabled,
                 preventKeyAction: isOpen,
-                placeholder,
+                placeholder: visibleItems.length === 0 ? placeholder : '',
                 ref: inputRef,
                 style: { width: inputWidth },
               })