fix: fix TableView from crashing when another collection is rendered as empty state (#9557)

* nested collections

* added test

* lint fix

* fix: wrap renderEmptyState in CollectionRendererContext.Provider in TableView component

* remove story, simplify test and add interactions

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Robert Snow <snowystinger@gmail.com>

Author: DPandyan

packages/@react-spectrum/s2/src/TableView.tsx

@@ -17,10 +17,12 @@ import {
   ButtonContext,
   CellRenderProps,
   Collection,
+  CollectionRendererContext,
   ColumnRenderProps,
   ColumnResizer,
   ContextValue,
   DEFAULT_SLOT,
+  DefaultCollectionRenderer,
   Form,
   Key,
   OverlayTriggerStateContext,
@@ -439,7 +441,9 @@ export const TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
   if (renderEmptyState != null && !isLoading) {
     emptyRender = (props: TableBodyRenderProps) => (
       <div className={centeredWrapper}>
-        {renderEmptyState(props)}
+        <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
+          {renderEmptyState(props)}
+        </CollectionRendererContext.Provider>
       </div>
     );
   } else if (loadingState === 'loading') {

packages/@react-spectrum/s2/stories/TableView.stories.tsx

@@ -26,6 +26,7 @@ import {
   Picker,
   PickerItem,
   Row,
+  SortDescriptor,
   StatusLight,
   TableBody,
   TableHeader,
@@ -41,7 +42,6 @@ import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
 import {Key} from '@react-types/shared';
 import type {Meta, StoryObj} from '@storybook/react';
 import React, {ReactElement, useCallback, useEffect, useRef, useState} from 'react';
-import {SortDescriptor} from 'react-aria-components';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useAsyncList, useListData} from '@react-stately/data';
 import {useEffectEvent} from '@react-aria/utils';

packages/@react-spectrum/s2/test/TableView.test.tsx

@@ -19,9 +19,12 @@ import {
   MenuItem,
   MenuSection,
   Row,
+  Tab,
   TableBody,
   TableHeader,
   TableView,
+  TabList,
+  Tabs,
   Text
 } from '../src';
 import {DisabledBehavior} from '@react-types/shared';
@@ -41,6 +44,21 @@ describe('TableView', () => {
     user = userEvent.setup({delay: null, pointerMap});
     offsetWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 400);
     offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 200);
+    window.CSSTransition = jest.fn(({children}) => children);
+
+    // Mock the getAnimations method
+    Element.prototype.getAnimations = jest.fn().mockImplementation(() => {
+      // Return an array of mock Animation objects
+      return [
+        {
+          // Mock the properties and methods you need
+          finished: Promise.resolve(), // Useful for waiting for animations to "finish"
+          play: jest.fn(),
+          pause: jest.fn(),
+          cancel: jest.fn()
+        }
+      ];
+    });
     jest.useFakeTimers();
   });
 
@@ -148,4 +166,44 @@ describe('TableView', () => {
     await user.tab();
     expect(document.activeElement).toBe(cells[3]);
   });
+
+  it('should render empty state + nested collection without crashing', async () => {
+    const tabItems = [
+      {id: 'general', label: 'General'},
+      {id: 'advanced', label: 'Advanced'}
+    ];
+    const renderEmptyState = () => (
+      <Tabs aria-label="Settings">
+        <TabList items={tabItems}>
+          {(item) => (
+            <Tab>
+              {item.label}
+            </Tab>
+          )}
+        </TabList>
+      </Tabs>
+    );
+
+    let {getAllByRole} = render(
+      <TableView aria-label="Debug table" selectionMode="none">
+        <TableHeader columns={columns}>
+          {(column) => (
+            <Column>
+              {column.name}
+            </Column>
+          )}
+        </TableHeader>
+        <TableBody items={[]} renderEmptyState={renderEmptyState} />
+      </TableView>
+    );
+    await act(() => Promise.resolve());
+
+    let tabs = getAllByRole('tab');
+    expect(tabs).toHaveLength(tabs.length);
+    expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
+    expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
+    await user.click(tabs[1]);
+    expect(tabs[0]).toHaveAttribute('aria-selected', 'false');
+    expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
+  });
 });