diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx index 2beaaa2bcf0..ce68e04deda 100644 --- a/packages/@react-spectrum/s2/src/TagGroup.tsx +++ b/packages/@react-spectrum/s2/src/TagGroup.tsx @@ -20,6 +20,7 @@ import { composeRenderProps, ContextValue, Provider, + ButtonContext as RACButtonContext, TextContext as RACTextContext, TagList, TagListProps, @@ -318,11 +319,13 @@ function TagGroupInner({ })}> {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 (
+ className={itemProps.className({size, allowsRemoving: Boolean(onRemove)})}> ({ 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})} />
); })} @@ -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 ( - <> + {isInRealDOM && (
)} - + ); } diff --git a/packages/@react-spectrum/s2/test/CustomDialog.test.tsx b/packages/@react-spectrum/s2/test/CustomDialog.test.tsx new file mode 100644 index 00000000000..0dd0ce47bb8 --- /dev/null +++ b/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( + + Open dialog + + {}}> + Chocolate + Mint + Strawberry + Vanilla + + + + ); + + let trigger = getByRole('button'); + await user.click(trigger); + act(() => {jest.runAllTimers();}); + expect(getByRole('dialog')).toBeVisible(); + }); +});