diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts index 7fddd3a956c..266e0d95128 100644 --- a/packages/@react-aria/tag/src/useTag.ts +++ b/packages/@react-aria/tag/src/useTag.ts @@ -24,7 +24,7 @@ import {useGridListItem} from '@react-aria/gridlist'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; -export interface TagAria extends Omit { +export interface TagAria extends SelectableItemStates { /** Props for the tag row element. */ rowProps: DOMAttributes, /** Props for the tag cell element. */ diff --git a/packages/react-aria-components/src/TagGroup.tsx b/packages/react-aria-components/src/TagGroup.tsx index 7df9f7b338e..7aad63d886d 100644 --- a/packages/react-aria-components/src/TagGroup.tsx +++ b/packages/react-aria-components/src/TagGroup.tsx @@ -249,7 +249,7 @@ export const Tag = /*#__PURE__*/ createLeafComponent(ItemNode, (props: TagProps, let {rowProps, gridCellProps, removeButtonProps, ...states} = useTag({item}, state, ref); let {hoverProps, isHovered} = useHover({ - isDisabled: !states.allowsSelection, + isDisabled: !states.allowsSelection && !states.hasAction, onHoverStart: item.props.onHoverStart, onHoverChange: item.props.onHoverChange, onHoverEnd: item.props.onHoverEnd diff --git a/packages/react-aria-components/test/TagGroup.test.js b/packages/react-aria-components/test/TagGroup.test.js index fad4a3aad13..27fc24066ee 100644 --- a/packages/react-aria-components/test/TagGroup.test.js +++ b/packages/react-aria-components/test/TagGroup.test.js @@ -176,6 +176,29 @@ describe('TagGroup', () => { expect(onHoverEnd).not.toHaveBeenCalled(); }); + it('should show hover state when tag has an href even without selectionMode', async () => { + let onHoverStart = jest.fn(); + let onHoverChange = jest.fn(); + let onHoverEnd = jest.fn(); + let {getAllByRole} = renderTagGroup({}, {}, {href: '/', className: ({isHovered}) => isHovered ? 'hover' : '', onHoverStart, onHoverChange, onHoverEnd}); + let row = getAllByRole('row')[0]; + + expect(row).not.toHaveAttribute('data-hovered'); + expect(row).not.toHaveClass('hover'); + + await user.hover(row); + expect(row).toHaveAttribute('data-hovered', 'true'); + expect(row).toHaveClass('hover'); + expect(onHoverStart).toHaveBeenCalledTimes(1); + expect(onHoverChange).toHaveBeenCalledTimes(1); + + await user.unhover(row); + expect(row).not.toHaveAttribute('data-hovered'); + expect(row).not.toHaveClass('hover'); + expect(onHoverEnd).toHaveBeenCalledTimes(1); + expect(onHoverChange).toHaveBeenCalledTimes(2); + }); + it('should support focus ring', async () => { let onFocus = jest.fn(); let onFocusChange = jest.fn();