fix(RAC): Select when label is numeric 0 (adobe#6968)

fixes adobe#6961 Co-authored-by: Homa Wong <[email protected]>
alecmev · Aug 28, 2024 · a5679cd · a5679cd
1 parent 32574f8
commit a5679cd
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git 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
@@ -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');
+  });
 });