From a5679cdb8db5ec8d6dc478a8536fe919a7b58b4f Mon Sep 17 00:00:00 2001
From: Homa Wong <homawong@gmail.com>
Date: Wed, 28 Aug 2024 08:08:37 -0700
Subject: [PATCH] fix(RAC): Select when label is numeric 0 (#6968)

fixes #6961

Co-authored-by: Homa Wong <hwong@paloaltonetworks.com>
---
 packages/react-aria-components/src/Select.tsx |  2 +-
 .../react-aria-components/test/Select.test.js | 29 +++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/react-aria-components/src/Select.tsx b/packages/react-aria-components/src/Select.tsx
index e58dbe36fae..50c3abaf448 100644
--- a/packages/react-aria-components/src/Select.tsx
+++ b/packages/react-aria-components/src/Select.tsx
@@ -257,7 +257,7 @@ function SelectValue<T extends object>(props: SelectValueProps<T>, ref: Forwarde
 
   let renderProps = useRenderProps({
     ...props,
-    defaultChildren: rendered || placeholder || stringFormatter.format('selectPlaceholder'),
+    defaultChildren: rendered ?? placeholder ?? stringFormatter.format('selectPlaceholder'),
     defaultClassName: 'react-aria-SelectValue',
     values: {
       selectedItem: state.selectedItem?.value as T ?? null,
diff --git a/packages/react-aria-components/test/Select.test.js b/packages/react-aria-components/test/Select.test.js
index 75f3cb0b15f..3bb2001a8ed 100644
--- a/packages/react-aria-components/test/Select.test.js
+++ b/packages/react-aria-components/test/Select.test.js
@@ -243,4 +243,33 @@ describe('Select', () => {
     expect(button).not.toHaveAttribute('aria-describedby');
     expect(select).not.toHaveAttribute('data-invalid');
   });
+
+  it('should support falsy (0) as a valid default value', async () => {
+    let {getByRole} = render(
+      <Select placeholder="pick a number">
+        <Label>Pick a number</Label>
+        <Button>
+          <SelectValue />
+        </Button>
+        <Popover>
+          <ListBox
+            items={Array.from({length: 5}).map((_, i) => ({
+              id: i,
+              label: i
+            }))}>
+            {(item) => <ListBoxItem id={item.id} textValue={`${item.label}`}>{item.label}</ListBoxItem>}
+          </ListBox>
+        </Popover>
+      </Select>
+    );
+
+    let button = getByRole('button');
+    await user.click(button);
+
+    let listbox = getByRole('listbox');
+    let options = within(listbox).getAllByRole('option');
+    await user.click(options[0]);
+
+    expect(button).toHaveTextContent('0');
+  });
 });