From 3666c66fae9f541ff2e3f8310d06f28f07e40b5e Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Tue, 28 Apr 2026 15:11:00 -0500
Subject: [PATCH] fix(Collections): handle falsy keys properly (#9993)

* fix(Collections): handle falsy keys properly

* add regression tests
---
 .../src/card/WaterfallLayout.tsx              |  4 +-
 packages/@react-spectrum/s2/src/TreeView.tsx  |  6 +--
 .../react-aria-components/src/DragAndDrop.tsx |  2 +-
 packages/react-aria-components/src/Table.tsx  |  4 +-
 packages/react-aria-components/src/Tree.tsx   |  4 +-
 .../src/TreeDropTargetDelegate.ts             |  8 ++--
 .../react-aria-components/test/Select.test.js | 25 +++++++++++
 .../react-aria-components/test/Table.test.js  | 35 +++++++++++++++-
 .../react-aria-components/test/Tree.test.tsx  | 41 +++++++++++++++++++
 .../src/collections/BaseCollection.ts         |  4 +-
 packages/react-aria/src/select/useSelect.ts   |  4 +-
 packages/react-aria/src/table/useTableRow.ts  |  2 +-
 .../src/table/TableCollection.ts              |  2 +-
 13 files changed, 120 insertions(+), 21 deletions(-)

diff --git a/packages/@adobe/react-spectrum/src/card/WaterfallLayout.tsx b/packages/@adobe/react-spectrum/src/card/WaterfallLayout.tsx
index c1187c6053c..68b660f0e46 100644
--- a/packages/@adobe/react-spectrum/src/card/WaterfallLayout.tsx
+++ b/packages/@adobe/react-spectrum/src/card/WaterfallLayout.tsx
@@ -203,7 +203,7 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
     let rect = new Rect(layoutInfo.rect.maxX + 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
     key = this._findClosest(layoutInfo.rect, rect)?.key;
 
-    if (!key) {
+    if (key == null) {
       rect = new Rect(layoutInfo.rect.maxX + 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
       key = this._findClosest(layoutInfo.rect, rect)?.key;
     }
@@ -218,7 +218,7 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
     let rect = new Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
     key = this._findClosest(layoutInfo.rect, rect)?.key;
 
-    if (!key) {
+    if (key == null) {
       rect = new Rect(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
       key = this._findClosest(layoutInfo.rect, rect)?.key;
     }
diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx
index 0b3ca51252a..fa19922aee9 100644
--- a/packages/@react-spectrum/s2/src/TreeView.tsx
+++ b/packages/@react-spectrum/s2/src/TreeView.tsx
@@ -594,10 +594,10 @@ function isNextSelected(id: Key | undefined, state: TreeState<unknown>) {
   let keyAfter = state.collection.getKeyAfter(id);
 
   // We need to skip non-item nodes because the selection manager will map non-item nodes to their parent before checking selection
-  let node = keyAfter ? state.collection.getItem(keyAfter) : null;
-  while (node && node.type !== 'item' && keyAfter) {
+  let node = keyAfter != null ? state.collection.getItem(keyAfter) : null;
+  while (node && node.type !== 'item' && keyAfter != null) {
     keyAfter = state.collection.getKeyAfter(keyAfter);
-    node = keyAfter ? state.collection.getItem(keyAfter) : null;
+    node = keyAfter != null ? state.collection.getItem(keyAfter) : null;
   }
 
   return keyAfter != null && state.selectionManager.isSelected(keyAfter);
diff --git a/packages/react-aria-components/src/DragAndDrop.tsx b/packages/react-aria-components/src/DragAndDrop.tsx
index b41e550fc39..28fd90c791b 100644
--- a/packages/react-aria-components/src/DragAndDrop.tsx
+++ b/packages/react-aria-components/src/DragAndDrop.tsx
@@ -84,7 +84,7 @@ export function useDndPersistedKeys(selectionManager: MultipleSelectionManager,
       if (nextKey != null) {
         let targetLevel = dropState.collection.getItem(dropTargetKey)?.level ?? 0;
         // Skip over any rows that are descendants of the target ("after" position should be after all children)
-        while (nextKey) {
+        while (nextKey != null) {
           let node = dropState.collection.getItem(nextKey);
           // eslint-disable-next-line max-depth
           if (!node) {
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index b14c5dd280a..36492be2a34 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -137,7 +137,7 @@ class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T
       if (lastChildKey != null) {
         let lastCell = this.getItem(lastChildKey) as GridNode<T> | null;
         while (lastCell && lastCell.type !== 'cell') {
-          lastCell = lastCell.prevKey ? this.getItem(lastCell.prevKey) as GridNode<T> | null : null;
+          lastCell = lastCell.prevKey != null ? this.getItem(lastCell.prevKey) as GridNode<T> | null : null;
         }
         if (lastCell) {
           let numberOfCellsInRow = (lastCell.colIndex ?? lastCell.index) + (lastCell.colSpan ?? 1);
@@ -308,7 +308,7 @@ class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T
           while (node) {
             yield node as Node<T>;
             let key = self.getKeyAfter(node.key);
-            node = key ? self.getItem(key) : null;
+            node = key != null ? self.getItem(key) : null;
             if (node && node.parentKey === item.parentKey) {
               break;
             }
diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx
index 276fd15fe31..5bb5a5dade2 100644
--- a/packages/react-aria-components/src/Tree.tsx
+++ b/packages/react-aria-components/src/Tree.tsx
@@ -109,12 +109,12 @@ class TreeCollection<T> extends BaseCollection<T> {
     while (node) {
       yield node as Node<T>;
       if (node.type === 'section') {
-        node = node.nextKey ? this.getItem(node.nextKey) : null;
+        node = node.nextKey != null ? this.getItem(node.nextKey) : null;
       } else {
         // This will include both item and content nodes
         // We handle the content nodes in useCollectionRenderer and ListLayout
         let key = this.getKeyAfter(node.key);
-        node = key ? this.getItem(key) : null;
+        node = key != null ? this.getItem(key) : null;
       }
     }
   }
diff --git a/packages/react-aria-components/src/TreeDropTargetDelegate.ts b/packages/react-aria-components/src/TreeDropTargetDelegate.ts
index b7407e537c9..253333da7c7 100644
--- a/packages/react-aria-components/src/TreeDropTargetDelegate.ts
+++ b/packages/react-aria-components/src/TreeDropTargetDelegate.ts
@@ -163,9 +163,9 @@ export class TreeDropTargetDelegate<T> {
     let parentKey = currentItem?.parentKey;
     let ancestorTargets: ItemDropTarget[] = [];
 
-    while (parentKey) {
+    while (parentKey != null) {
       let parentItem = collection.getItem(parentKey);
-      let nextItem = parentItem?.nextKey ? collection.getItem(parentItem.nextKey) : null;
+      let nextItem = parentItem?.nextKey != null ? collection.getItem(parentItem.nextKey) : null;
       let isLastChildAtLevel = !nextItem || nextItem.parentKey !== parentKey;
 
       if (isLastChildAtLevel) {
@@ -193,7 +193,7 @@ export class TreeDropTargetDelegate<T> {
     // Handle converting "after" to "before next" for non-ambiguous cases
     if (potentialTargets.length === 1) {
       let nextKey = collection.getKeyAfter(target.key);
-      let nextNode = nextKey ? collection.getItem(nextKey) : null;
+      let nextNode = nextKey != null ? collection.getItem(nextKey) : null;
       if (nextKey != null && nextNode && currentItem && nextNode.level != null && currentItem.level != null && nextNode.level > currentItem.level) {
         let beforeTarget = {
           type: 'item',
@@ -225,7 +225,7 @@ export class TreeDropTargetDelegate<T> {
     let currentItem = this.state!.collection.getItem(originalTarget.key);
     let parentKey = currentItem?.parentKey;
 
-    if (!parentKey) {
+    if (parentKey == null) {
       return potentialTargets[0];
     }
 
diff --git a/packages/react-aria-components/test/Select.test.js b/packages/react-aria-components/test/Select.test.js
index d7cc5b6d6bf..b88094f5d3b 100644
--- a/packages/react-aria-components/test/Select.test.js
+++ b/packages/react-aria-components/test/Select.test.js
@@ -343,6 +343,31 @@ describe('Select', () => {
     expect(select).not.toHaveAttribute('data-invalid');
   });
 
+  it('should support arrow key navigation to a falsy key', async () => {
+    let onSelectionChange = jest.fn();
+    let {getByRole} = render(
+      <Select onSelectionChange={onSelectionChange} aria-label="Pick a number">
+        <Button>
+          <SelectValue />
+        </Button>
+        <Popover>
+          <ListBox
+            items={Array.from({length: 3}).map((_, i) => ({id: i, label: `${i}`}))}>
+            {item => <ListBoxItem id={item.id} textValue={item.label}>{item.label}</ListBoxItem>}
+          </ListBox>
+        </Popover>
+      </Select>
+    );
+
+    let button = getByRole('button');
+    act(() => button.focus());
+
+    await user.keyboard('{ArrowRight}');
+    expect(onSelectionChange).toHaveBeenCalledTimes(1);
+    expect(onSelectionChange).toHaveBeenLastCalledWith(0);
+    expect(button).toHaveTextContent('0');
+  });
+
   it('should support falsy (0) as a valid default value', async () => {
     let {getByRole} = render(
       <Select placeholder="pick a number">
diff --git a/packages/react-aria-components/test/Table.test.js b/packages/react-aria-components/test/Table.test.js
index 7da406a654d..b5e8bdea8f8 100644
--- a/packages/react-aria-components/test/Table.test.js
+++ b/packages/react-aria-components/test/Table.test.js
@@ -468,6 +468,39 @@ describe('Table', () => {
     expect(getAllByRole('row')).toHaveLength(5);
   });
 
+  it('should support rows with a falsy key', () => {
+    let falsyKeyRows = [
+      {id: 1, name: 'One', date: '4/7/2021', type: 'File folder'},
+      {id: 0, name: 'Zero', date: '6/7/2020', type: 'File folder'},
+      {id: 2, name: 'Two', date: '11/20/2010', type: 'System file'}
+    ];
+
+    let {getAllByRole} = render(
+      <Table aria-label="Files">
+        <MyTableHeader columns={columns}>
+          {column => (
+            <MyColumn isRowHeader={column.isRowHeader} childColumns={column.children}>
+              {column.name}
+            </MyColumn>
+          )}
+        </MyTableHeader>
+        <TableBody items={falsyKeyRows}>
+          {item => (
+            <MyRow columns={columns}>
+              {column => <Cell>{item[column.id]}</Cell>}
+            </MyRow>
+          )}
+        </TableBody>
+      </Table>
+    );
+
+    let rows = getAllByRole('row');
+    expect(rows).toHaveLength(4);
+    expect(rows[1]).toHaveTextContent('One');
+    expect(rows[2]).toHaveTextContent('Zero');
+    expect(rows[3]).toHaveTextContent('Two');
+  });
+
   it('should support column hover when sorting is allowed', async () => {
     let {getAllByRole} = renderTable({
       columnProps: {allowsSorting: true, className: ({isHovered}) => isHovered ? 'hover' : ''}
@@ -3051,7 +3084,7 @@ describe('Table', () => {
               )}
             </Collection>
           </TableBody>
-  
+
         ))}
       </Table>
     );
diff --git a/packages/react-aria-components/test/Tree.test.tsx b/packages/react-aria-components/test/Tree.test.tsx
index 3892774265f..1da7313e8f9 100644
--- a/packages/react-aria-components/test/Tree.test.tsx
+++ b/packages/react-aria-components/test/Tree.test.tsx
@@ -446,6 +446,47 @@ describe('Tree', () => {
     expect(rows[16]).toHaveAttribute('aria-setsize', '1');
   });
 
+  it('should support items with falsy keys', async () => {
+    let falsyKeyRows = [
+      {id: 0, name: 'Zero', childItems: [
+        {id: '', name: 'Empty'},
+        {id: 'zero-child', name: 'Zero child'}
+      ]},
+      {id: 1, name: 'One'}
+    ];
+
+    let {getAllByRole} = render(
+      <Tree
+        defaultExpandedKeys={new Set([0])}
+        aria-label="falsy keys tree"
+        items={falsyKeyRows}>
+        {(item: any) => (
+          <DynamicTreeItem childItems={item.childItems} textValue={item.name}>
+            {item.name}
+          </DynamicTreeItem>
+        )}
+      </Tree>
+    );
+
+    let rows = getAllByRole('row');
+    expect(rows).toHaveLength(4);
+    expect(rows[0]).toHaveTextContent('Zero');
+    expect(rows[1]).toHaveTextContent('Empty');
+    expect(rows[2]).toHaveTextContent('Zero child');
+    expect(rows[3]).toHaveTextContent('One');
+
+    await user.tab();
+    expect(document.activeElement).toBe(rows[0]);
+    await user.keyboard('{ArrowDown}');
+    expect(document.activeElement).toBe(rows[1]);
+    await user.keyboard('{ArrowDown}');
+    expect(document.activeElement).toBe(rows[2]);
+    await user.keyboard('{ArrowDown}');
+    expect(document.activeElement).toBe(rows[3]);
+    await user.keyboard('{ArrowUp}');
+    expect(document.activeElement).toBe(rows[2]);
+  });
+
   it.each(['Checkbox', 'CheckboxField'])('should render checkboxes for selection using %s', async (comp) => {
     let {getByRole, getAllByRole} = render(<StaticTree treeProps={{selectionMode: 'single'}} rowProps={{href: 'https://google.com', checkboxComponent: comp}} />);
     let tree = getByRole('treegrid');
diff --git a/packages/react-aria/src/collections/BaseCollection.ts b/packages/react-aria/src/collections/BaseCollection.ts
index 70c55c859fe..1de375d4347 100644
--- a/packages/react-aria/src/collections/BaseCollection.ts
+++ b/packages/react-aria/src/collections/BaseCollection.ts
@@ -331,7 +331,7 @@ function filterChildren<T>(collection: BaseCollection<T>, newCollection: BaseCol
       lastNode = newNode;
     }
 
-    currentNode = currentNode.nextKey ? collection.getItem(currentNode.nextKey) : null;
+    currentNode = currentNode.nextKey != null ? collection.getItem(currentNode.nextKey) : null;
   }
 
   // TODO: this is pretty specific to dividers but doesn't feel like there is a good way to get around it since we only can know
@@ -341,7 +341,7 @@ function filterChildren<T>(collection: BaseCollection<T>, newCollection: BaseCol
     let prevKey = lastNode.prevKey;
     newCollection.removeNode(lastNode.key);
 
-    if (prevKey) {
+    if (prevKey != null) {
       lastNode = newCollection.getItem(prevKey) as Mutable<CollectionNode<T>>;
       lastNode.nextKey = null;
     } else {
diff --git a/packages/react-aria/src/select/useSelect.ts b/packages/react-aria/src/select/useSelect.ts
index ffaaa4cb715..faec979cf3a 100644
--- a/packages/react-aria/src/select/useSelect.ts
+++ b/packages/react-aria/src/select/useSelect.ts
@@ -128,7 +128,7 @@ export function useSelect<T, M extends SelectionMode = 'single'>(props: AriaSele
         e.preventDefault();
 
         let key = state.selectedKey != null ? delegate.getKeyAbove?.(state.selectedKey) : delegate.getFirstKey?.();
-        if (key) {
+        if (key != null) {
           state.setSelectedKey(key);
         }
         break;
@@ -138,7 +138,7 @@ export function useSelect<T, M extends SelectionMode = 'single'>(props: AriaSele
         e.preventDefault();
 
         let key = state.selectedKey != null ? delegate.getKeyBelow?.(state.selectedKey) : delegate.getFirstKey?.();
-        if (key) {
+        if (key != null) {
           state.setSelectedKey(key);
         }
         break;
diff --git a/packages/react-aria/src/table/useTableRow.ts b/packages/react-aria/src/table/useTableRow.ts
index 95df8d68fae..8d585eb2172 100644
--- a/packages/react-aria/src/table/useTableRow.ts
+++ b/packages/react-aria/src/table/useTableRow.ts
@@ -89,7 +89,7 @@ export function useTableRow<T>(props: GridRowProps<T>, state: TableState<T> | Tr
               if (hasChildRows && state.expandedKeys.has(treeNode.key)) {
                 state.toggleKey(treeNode.key);
                 e.stopPropagation();
-              } else if (!state.expandedKeys.has(treeNode.key) && treeNode.parentKey && treeNode.level > 0) {
+              } else if (!state.expandedKeys.has(treeNode.key) && treeNode.parentKey != null && treeNode.level > 0) {
                 // Item is a leaf or already collapsed, move focus to parent
                 state.selectionManager.setFocusedKey(treeNode.parentKey);
                 e.stopPropagation();
diff --git a/packages/react-stately/src/table/TableCollection.ts b/packages/react-stately/src/table/TableCollection.ts
index c560e87b314..22147d23a34 100644
--- a/packages/react-stately/src/table/TableCollection.ts
+++ b/packages/react-stately/src/table/TableCollection.ts
@@ -51,7 +51,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
     let parentKey = column.parentKey;
     let col = [column];
 
-    while (parentKey) {
+    while (parentKey != null) {
       let parent: GridNode<T> | undefined = keyMap.get(parentKey);
       if (!parent) {
         break;