fix: DialogTrigger inside Tabs

packages/react-aria-components/src/Dialog.tsx

@@ -42,6 +42,7 @@ import React, {
 import {RootMenuTriggerStateContext} from './Menu';
 import {TextContext} from './Text';
 import {useId} from 'react-aria/useId';
+import {useIsHidden} from 'react-aria/private/collections/Hidden';
 import {useMenuTriggerState} from 'react-stately/useMenuTriggerState';
 import {useOverlayTrigger} from 'react-aria/useOverlayTrigger';
 
@@ -77,7 +78,7 @@ export const OverlayTriggerStateContext = createContext<OverlayTriggerState | nu
 /**
  * A DialogTrigger opens a dialog when a trigger element is pressed.
  */
-export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
+export function DialogTrigger(props: DialogTriggerProps): JSX.Element | null {
   // Use useMenuTriggerState instead of useOverlayTriggerState in case a menu is embedded in the dialog.
   // This is needed to handle submenus.
   let state = useMenuTriggerState(props);
@@ -94,6 +95,13 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
   // oxlint-disable-next-line react/react-compiler
   overlayProps['aria-labelledby'] = triggerProps.id;
 
+  // If within a collection (e.g. Tabs), render nothing.
+  // Not using createHideableComponent for this because that also creates a forwardRef.
+  let isHidden = useIsHidden();
+  if (isHidden) {
+    return null;
+  }
+
   return (
     <Provider
       values={[

packages/react-aria-components/test/Tabs.test.js

@@ -20,6 +20,7 @@ import {
 } from '@react-spectrum/test-utils-internal';
 import {Button} from '../src/Button';
 import {ComboBox} from '../src/ComboBox';
+import {DialogTrigger} from '../src/Dialog';
 import {Input} from '../src/Input';
 import {Label} from '../src/Label';
 import {ListBox, ListBoxItem} from '../src/ListBox';
@@ -1079,4 +1080,37 @@ describe('Tabs', () => {
     expect(menu.getOptions()).toHaveLength(3);
     await menu.close();
   });
+
+  it('supports DialogTrigger inside Tabs', async () => {
+    let tree = render(
+      <Tabs>
+        <div>
+          <TabList>
+            <Tab id="key1">First Tab</Tab>
+            <Tab id="key2">Second Tab</Tab>
+          </TabList>
+          <DialogTrigger>
+            <Button>Dialog button</Button>
+            <Popover aria-label="Filters">
+              <Menu aria-label="Filter options">
+                <MenuItem>Item 1</MenuItem>
+                <MenuItem>Item 2</MenuItem>
+              </Menu>
+            </Popover>
+          </DialogTrigger>
+        </div>
+        <TabPanel id="key1">First Tab content</TabPanel>
+        <TabPanel id="key2">Second Tab content</TabPanel>
+      </Tabs>
+    );
+
+    let tester = testUtilUser.createTester('Tabs', {root: tree.getByRole('tablist')});
+    expect(tester.getTabs().length).toBe(2);
+
+    let trigger = tree.getByRole('button');
+    await user.click(trigger);
+
+    let dialog = tree.getByRole('dialog');
+    expect(within(dialog).getAllByRole('menuitem')).toHaveLength(2);
+  });
 });