From d02b7a9042786e4d4c4a46d286b62e6d80afc621 Mon Sep 17 00:00:00 2001
From: Mikkel Laursen <mlaursen03@gmail.com>
Date: Mon, 10 Aug 2020 18:34:17 -0600
Subject: [PATCH] fix(listbox): render `0` as a valid display value

---
 packages/form/src/select/__tests__/utils.ts | 36 ++++++++++++++++++++-
 packages/form/src/select/utils.ts           |  2 +-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/form/src/select/__tests__/utils.ts b/packages/form/src/select/__tests__/utils.ts
index 060f3c2aec..83915dee9e 100644
--- a/packages/form/src/select/__tests__/utils.ts
+++ b/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>
+    `);
+  });
+});
diff --git a/packages/form/src/select/utils.ts b/packages/form/src/select/utils.ts
index 8fe01ac5da..1e6b8a4ef0 100644
--- a/packages/form/src/select/utils.ts
+++ b/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;
   }