From c1e408e3aa9b5692820ac4d5e8a258ac443fddfc Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 8 May 2025 14:19:41 +0100
Subject: [PATCH] Combobox: Don't render a 0 in the input suffix when the value
 is 0 (#105107)

* don't render a 0 in the input suffix when the value is 0

* remove .only

* update unit test
---
 .../src/components/Combobox/Combobox.test.tsx      | 14 ++++++++++++++
 .../src/components/Combobox/Combobox.tsx           |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.test.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.test.tsx
index 12b37c9f4bf..091e6fed227 100644
--- a/packages/grafana-ui/src/components/Combobox/Combobox.test.tsx
+++ b/packages/grafana-ui/src/components/Combobox/Combobox.test.tsx
@@ -22,6 +22,12 @@ const optionsWithGroups: ComboboxOption[] = [
   { label: 'Option 5', value: '5', group: 'Group 2' },
   { label: 'Option 6', value: '6', group: 'Group 2' },
 ];
+const numericOptions: Array<ComboboxOption<number>> = [
+  { label: 'Option 0', value: 0 },
+  { label: 'Option 1', value: 1 },
+  { label: 'Option 2', value: 2 },
+  { label: 'Option 3', value: 3 },
+];
 
 describe('Combobox', () => {
   const onChangeHandler = jest.fn();
@@ -159,6 +165,14 @@ describe('Combobox', () => {
     expect(screen.getByRole('option', { name: 'Default' })).toHaveAttribute('aria-selected', 'true');
   });
 
+  it('does not show a hanging 0 when the value is 0', async () => {
+    render(
+      <Combobox options={numericOptions} value={numericOptions[0].value} onChange={onChangeHandler} isClearable />
+    );
+    expect(screen.getByDisplayValue('Option 0')).toBeInTheDocument();
+    expect(screen.queryByText('0')).not.toBeInTheDocument();
+  });
+
   describe('groups', () => {
     it('renders group headers', async () => {
       const options = [
diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.tsx
index f06ce30060c..be8cfad5398 100644
--- a/packages/grafana-ui/src/components/Combobox/Combobox.tsx
+++ b/packages/grafana-ui/src/components/Combobox/Combobox.tsx
@@ -339,7 +339,7 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
 
   const inputSuffix = (
     <>
-      {value && value === selectedItem?.value && isClearable && (
+      {value !== undefined && value === selectedItem?.value && isClearable && (
         <Icon
           name="times"
           className={styles.clear}