fix: Clear button context provider on TagGroup items so they dont conflict with parent contexts

Author: LFDanLu

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

@@ -17,6 +17,7 @@ import {
   TagGroup as AriaTagGroup,
   TagGroupProps as AriaTagGroupProps,
   TagProps as AriaTagProps,
+  ButtonContext as RACButtonContext,
   composeRenderProps,
   ContextValue,
   Provider,
@@ -522,7 +523,10 @@ export const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({ch
 function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphasized, isSelected}) {
   let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};
   return (
-    <>
+    <Provider
+      values={[
+        [RACButtonContext, null]
+      ]}>
       {isInRealDOM && (
         <div
           className={style({
@@ -567,6 +571,6 @@ function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphas
           isStaticColor={isEmphasized && isSelected}
           isDisabled={isDisabled} />
       )}
-    </>
+    </Provider>
   );
 }

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

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2025 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 {ActionButton, CustomDialog, DialogTrigger, Tag, TagGroup} from '../src';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+describe('CustomDialog', () => {
+  let user;
+  beforeAll(() => {
+    user = userEvent.setup({delay: null, pointerMap});
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    act(() => jest.runAllTimers());
+  });
+
+  afterAll(function () {
+    jest.restoreAllMocks();
+  });
+
+  it('should allow you to render a taggroup inside', async () => {
+    let {getByRole} = render(
+      <DialogTrigger>
+        <ActionButton>Open dialog</ActionButton>
+        <CustomDialog isDismissible>
+          <TagGroup
+            label="Ice cream categories"
+            maxRows={1}
+            onRemove={() => {}}>
+            <Tag>Chocolate</Tag>
+            <Tag>Mint</Tag>
+            <Tag>Strawberry</Tag>
+            <Tag>Vanilla</Tag>
+          </TagGroup>
+        </CustomDialog>
+      </DialogTrigger>
+    );
+
+
+    let trigger = getByRole('button');
+    await user.click(trigger);
+    act(() => {jest.runAllTimers();});
+
+    expect(getByRole('dialog')).toBeVisible();
+  });
+});