fix(listbox): render 0 as a valid display value

Author: mlaursen

packages/form/src/select/__tests__/utils.ts

@@ -1,5 +1,5 @@
 import { createElement } from "react";
-import { getOptionId, getOptionLabel } from "../utils";
+import { getOptionId, getOptionLabel, getDisplayLabel } from "../utils";
 
 describe("getOptionId", () => {
   it("should return the correct id starting from 1 instead of 0", () => {
@@ -35,3 +35,37 @@ describe("getOptionLabel", () => {
     expect(getOptionLabel({ value: "A" }, "label")).toBe(null);
   });
 });
+
+describe("getDisplayLabel", () => {
+  it("should return null if there is no option", () => {
+    expect(getDisplayLabel(null, "label", true)).toBe(null);
+    expect(getDisplayLabel(null, "label", false)).toBe(null);
+    expect(getDisplayLabel("", "label", true)).toBe(null);
+    expect(getDisplayLabel("", "label", false)).toBe(null);
+  });
+
+  it("should return the label if the includeLeft option is false or the option is not an object", () => {
+    expect(getDisplayLabel(0, "label", true)).toBe(0);
+    expect(getDisplayLabel(0, "label", false)).toBe(0);
+    expect(getDisplayLabel("0", "label", true)).toBe("0");
+    expect(getDisplayLabel("0", "label", false)).toBe("0");
+    expect(getDisplayLabel("Hello", "label", true)).toBe("Hello");
+    expect(getDisplayLabel("Hello", "label", false)).toBe("Hello");
+  });
+
+  it("should return the TextIconSpacing component when includeLeft is enabled and the option is an prop object", () => {
+    const option = {
+      leftAddon: "Addon",
+      label: "Some Words",
+    };
+
+    const result = getDisplayLabel(option, "label", true);
+    expect(result).toMatchInlineSnapshot(`
+      <TextIconSpacing
+        icon="Addon"
+      >
+        Some Words
+      </TextIconSpacing>
+    `);
+  });
+});

packages/form/src/select/utils.ts

@@ -107,7 +107,7 @@ export function getDisplayLabel(
   labelKey: string,
   includeLeft: boolean
 ): ReactNode {
-  if (!option) {
+  if (!option && option !== 0) {
     return null;
   }