data-hovered not triggered for Tag with href

[pavsidhu]

Provide a general summary of the issue here

With React Aria Components, when using a Tag with href, data-hovered doesn't get applied.

🤔 Expected Behavior?

I expect data-hovered=true when I hover over a Tag with href

😯 Current Behavior

data-hovered is not set when I hover over a Tag with href

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

CSS:

@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";

TypeScript:

<TagGroup>
  <Tag id="1" href="/" className="hover:bg-red-500">One</Tag>
</TagGroup>

Version

react-aria-components 1.14.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[yihuiliao]

This seems to be intentional given this line:

react-spectrum/packages/react-aria-components/src/TagGroup.tsx

Line 249 in b321d7d

isDisabled: !states.allowsSelection,

Tags with an href aren't selectable, therefore it's considered "disabled" here and doesn't set the isHovered state. The same behavior can be seen with a TagGroup with selectionMode='none'. I think it makes sense to keep this behavior when selectionMode=none but I can see why you might want the hovered state when a Tag has an href. We could perhaps consider opening this up more but I'd like to check with the team.