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

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 = [

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}