MultiCombobox: Show placeholder when there is no options selected (g…

…rafana#99743)
tipee-sa · Jan 29, 2025 · 03f89a1 · 03f89a1
1 parent baaff62
commit 03f89a1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -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 },
               })