fix(Select): display label for empty string value (#543)

Author: ariser

src/components/Select/SingleSelect.test.tsx

@@ -138,6 +138,46 @@ describe("Select", () => {
     expect(getByTestId("select-trigger")).toHaveTextContent("Content0");
   });
 
+  it("should render initially selected option with empty value", () => {
+    const OPTION_TEXT = "Empty option";
+
+    const { getByTestId } = renderSelect({
+      value: "",
+      options: [
+        {
+          value: "",
+          label: OPTION_TEXT,
+        },
+      ],
+    });
+
+    const selectedValue = getByTestId("select-trigger");
+    expect(selectedValue.textContent).toBe(OPTION_TEXT);
+  });
+
+  it("should render manually selected option with empty value", () => {
+    const OPTION_TEXT = "Empty option";
+
+    const { queryByText, getByTestId } = renderSelect({
+      options: [
+        {
+          value: "",
+          label: OPTION_TEXT,
+        },
+      ],
+    });
+
+    const selectTrigger = getByTestId("select-trigger");
+    expect(selectTrigger).not.toBeNull();
+    expect(selectTrigger.textContent).toBe("Select an option");
+    selectTrigger && fireEvent.click(selectTrigger);
+
+    const item = queryByText(OPTION_TEXT);
+    expect(item).not.toBeNull();
+    item && fireEvent.click(item);
+    expect(selectTrigger.textContent).toBe(OPTION_TEXT);
+  });
+
   it("should close select on selecting item", () => {
     const { queryByText } = renderSelect({});
     const selectTrigger = queryByText("Select an option");

src/components/Select/SingleSelect.tsx

@@ -29,7 +29,11 @@ export const Select = ({
   ...props
 }: SelectProps) => {
   const [selectedValues, setSelectedValues] = useState<Array<string>>(
-    valueProp ? [valueProp] : defaultValue ? [defaultValue] : []
+    typeof valueProp === "string"
+      ? [valueProp]
+      : typeof defaultValue === "string"
+      ? [defaultValue]
+      : []
   );
   const [open, setOpen] = useState(false);
 
@@ -69,7 +73,7 @@ export const Select = ({
   );
 
   useUpdateEffect(() => {
-    setSelectedValues(valueProp ? [valueProp] : []);
+    setSelectedValues(typeof valueProp === "string" ? [valueProp] : []);
   }, [valueProp]);
 
   const conditionalProps: Partial<SelectOptionProp> = {};
@@ -82,7 +86,7 @@ export const Select = ({
   return (
     <InternalSelect
       onChange={onChange}
-      value={valueProp ? [valueProp] : selectedValues}
+      value={typeof valueProp === "string" ? [valueProp] : selectedValues}
       open={open}
       onOpenChange={onOpenChange}
       onSelect={onSelect}

src/components/Select/SingleSelectValue.tsx

@@ -20,11 +20,12 @@ const SingleSelectValue = ({
   valueNode?: SelectItemProps;
   value: string;
 }) => {
-  const { icon, iconDir, children, label } = valueNode ?? {};
-  if (!value) {
+  if (value === undefined || value === null) {
     return null;
   }
 
+  const { icon, iconDir, children, label } = valueNode ?? {};
+
   return (
     <SelectValueContainer>
       <IconWrapper