From 5f5e1ad32afeef1e42c546506db5218f0ea23596 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Wed, 20 May 2026 14:54:30 -0500
Subject: [PATCH 1/2] fix(s2): prevent infinite render loop in Tabs inside
 DropZone

---
 packages/@react-spectrum/s2/src/Tabs.tsx      | 11 ++-
 .../@react-spectrum/s2/test/Tabs.test.tsx     | 72 +++++++++++++++++++
 2 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 packages/@react-spectrum/s2/test/Tabs.test.tsx

diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 2829a3389a1..1c5f92c16af 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -139,6 +139,7 @@ const InternalTabsContext = createContext<
   Partial<TabsProps> & {
     tablistRef?: RefObject<HTMLDivElement | null>;
     selectedKey?: Key | null;
+    baseId?: string;
   }
 >({});
 
@@ -200,6 +201,8 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
   }
 
   let tablistRef = useRef<HTMLDivElement | null>(null);
+  // Shared base id so child Tab/TabPanel components can derive stable ids.
+  let baseId = useId();
 
   return (
     <Provider
@@ -215,6 +218,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
             tablistRef,
             onSelectionChange: setValue,
             labelBehavior,
+            baseId,
             'aria-label': props['aria-label'],
             'aria-labelledby': props['aria-labelledby']
           }
@@ -460,9 +464,12 @@ const icon = style({
 });
 
 export function Tab(props: TabProps): ReactNode {
-  let {density, orientation, labelBehavior} = useContext(InternalTabsContext) ?? {};
+  let {density, orientation, labelBehavior, baseId} = useContext(InternalTabsContext) ?? {};
 
-  let contentId = useId();
+  // Derive a stable content id from the shared baseId on InternalTabsContext.
+  // Prevents infinite loop when rendering across multiple CollectionBuilder portals.
+  let fallbackId = useId();
+  let contentId = `${baseId ?? fallbackId}-content-${props.id ?? fallbackId}`;
   let ariaLabelledBy = props['aria-labelledby'] || '';
 
   return (
diff --git a/packages/@react-spectrum/s2/test/Tabs.test.tsx b/packages/@react-spectrum/s2/test/Tabs.test.tsx
new file mode 100644
index 00000000000..27d140043ac
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/Tabs.test.tsx
@@ -0,0 +1,72 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {act, pointerMap, render} from '@react-spectrum/test-utils-internal';
+import {Button} from '../src/Button';
+import {DropZone as RACDropZone} from 'react-aria-components/DropZone';
+import React, {useState} from 'react';
+import {Skeleton} from '../src/Skeleton';
+import {Tab, TabList, TabPanel, Tabs} from '../src/Tabs';
+import {Text} from '../src/Content';
+import userEvent from '@testing-library/user-event';
+
+describe('Tabs', () => {
+  let user;
+  beforeAll(() => {
+    jest.useFakeTimers();
+    user = userEvent.setup({delay: null, pointerMap});
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    act(() => jest.runAllTimers());
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should not infinite-loop when inside DropZone with a controlled Tabs + Skeleton + Text', async () => {
+    function Repro() {
+      const [tab, setTab] = useState<string>('a');
+      return (
+        <RACDropZone data-testid="dropzone" aria-label="DropZone">
+          <Button onPress={() => {}}>Sign in</Button>
+          <Tabs aria-label="x" selectedKey={tab} onSelectionChange={k => setTab(k as string)}>
+            <TabList>
+              <Tab id="a">A</Tab>
+            </TabList>
+            <TabPanel id="a">
+              <Skeleton isLoading>
+                <Text>x</Text>
+              </Skeleton>
+            </TabPanel>
+          </Tabs>
+        </RACDropZone>
+      );
+    }
+
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const {getByTestId} = render(<Repro />);
+
+    await act(async () => {
+      await user.hover(getByTestId('dropzone'));
+    });
+
+    const updateDepthError = errorSpy.mock.calls.find(call =>
+      call.some(arg => String(arg).includes('Maximum update depth'))
+    );
+    expect(updateDepthError).toBeUndefined();
+    errorSpy.mockRestore();
+  });
+});

From 28f447b2a020a989ec87724258850752437629d9 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Wed, 20 May 2026 15:02:42 -0500
Subject: [PATCH 2/2] fix test

---
 packages/@react-spectrum/s2/test/Tabs.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/@react-spectrum/s2/test/Tabs.test.tsx b/packages/@react-spectrum/s2/test/Tabs.test.tsx
index 27d140043ac..7927e135a94 100644
--- a/packages/@react-spectrum/s2/test/Tabs.test.tsx
+++ b/packages/@react-spectrum/s2/test/Tabs.test.tsx
@@ -24,6 +24,7 @@ describe('Tabs', () => {
   beforeAll(() => {
     jest.useFakeTimers();
     user = userEvent.setup({delay: null, pointerMap});
+    Element.prototype.getAnimations = jest.fn().mockImplementation(() => []);
   });
 
   afterEach(() => {