fix: Clear button context provider on TagGroup items so they don't throw when in a CustomDialog (#9051)

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

* ugh lint

* fix tests?

* fix tests

* always forget to get rid of console.log new lines

Author: LFDanLu

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

@@ -20,6 +20,7 @@ import {
   composeRenderProps,
   ContextValue,
   Provider,
+  ButtonContext as RACButtonContext,
   TextContext as RACTextContext,
   TagList,
   TagListProps,
@@ -318,20 +319,22 @@ function TagGroupInner<T>({
                 })}>
                 {allItems.map(item => {
                   // pull off individual props as an allow list, don't want refs or other props getting through
+                  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                  let {ref, ...itemProps} = item.props;
                   return (
                     <div
-                      style={item.props.UNSAFE_style}
+                      style={itemProps.UNSAFE_style}
                       key={item.key}
-                      className={item.props.className({size, allowsRemoving: Boolean(onRemove)})}>
+                      className={itemProps.className({size, allowsRemoving: Boolean(onRemove)})}>
                       <TagWrapper
                         key={item.key}
                         id={item.key}
                         textValue={item.textValue}
                         isInRealDOM
                         size={size}
                         allowsRemoving={!!onRemove}
-                        {...item.props}
-                        children={item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})} />
+                        {...itemProps}
+                        children={itemProps.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})} />
                     </div>
                   );
                 })}
@@ -522,7 +525,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 +573,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,57 @@
+/*
+ * 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(() => {
+    jest.useFakeTimers();
+    user = userEvent.setup({delay: null, pointerMap});
+  });
+
+  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();
+  });
+});