Table(react-aria-components): `[data-hovered]` does not work for `<Row/>`

[jaknas]

🐛 Bug Report

Documentation mentions [data-hovered] selector for <Row/>. In reality, it does not work (the data attribute is not applied)

🤔 Expected Behavior

data-hovered attribute should be applied when row is hovered

😯 Current Behavior

data-hovered is not applied

💻 Code Sample

https://codesandbox.io/s/objective-field-7mq4g6?file=/src/App.js

in the example, I used data-focus-visible which works as expected when row is focused. data-hovered is also used, but styles are not applied when row is hovered with a mouse pointer.

[devongovett]

I believe the hover state only applies when the row is actually interactive, e.g. selectable or actionable. If you add selectionMode or onAction props to your sandbox I do see the hover state. I think this was intentional so users could know when a row is pressable. You could always use the regular CSS :hover pseudo I guess. Not sure how we'd make this behavior changeable otherwise.

[jaknas]

I believe the hover state only applies when the row is actually interactive, e.g. selectable or actionable. If you add selectionMode or onAction props to your sandbox I do see the hover state. I think this was intentional so users could know when a row is pressable. You could always use the regular CSS :hover pseudo I guess. Not sure how we'd make this behavior changeable otherwise.

Ah! Got it. That makes sense, thank you. In that case, I'd maybe suggest mentioning in the docs. It might save some time for others in future.

[Ecksters]

It's particularly troublesome when using the tailwind-css-react-aria-components plugin without a prefix, as it overrides the default tailwind hover selector, but doesn't work due to the data-rac being present but the data-hovered never being added unless you have a selectionMode other than none.

[devongovett]

Two ways around this with the tailwind plugin:

1. Use a Tailwind arbitrary variant to use native hover: [&:hover]:bg-gray-300.
2. Use the prefix option of the Tailwind plugin so that hover: is native and rac-hover: is RACs version.

We may also in the future add a prop to enable hover states even when an element is non-interactive. We discussed changing the default behavior, but it introduced more complications such as inconsistency between hover and press states, what to do with read only components, etc. Hover states on non-interactive elements seem to be more of an edge case than the common case (table rows being a more prominent example), so we'd rather keep that as the default for now. We'll add something to the documentation about this as well.

[janvorwerk]

Hello! I believe that it's the exact same problem with Tags in a TagGroup. I try to use the tailwind hover: selector but it does not work due to the data-rac attribute. Adding selectionMode="single" to the TagGroup does not seem to help but the [&:hover]: trick mentionned above by @devongovett works! 🙏 Surprisingly, the data-hovered attribute is added in the tags documentation examples... not sure what differs.

FWIW, my use-case is to use the href: <Tag href="..."> so there should be no selectionMode anyway.

The same issue on table rows and tags seem to be two sides of the same coin, so I did not open a specific issue, let me know if you'd rather want me to open another issue. Best

[Faithfinder]

First of all, can you please add this tidbit to the docs? This was a weird debugging session.

Second, for me part of the problem is that RAC components don't expose onMouseEnter and onMouseLeave, making it impossible to manage hover programmatically.

Here's a screenshot from Instagram showing the pattern similar to what I'm trying to achieve:

There's multiple actions associated with an item, and the "meatball" menu is only shown on hover. The item itself is non-interactive, only actions are. Giving it an onAction isn't strictly speaking correct in this case, though probably better than dummy selection mode.

[devongovett]

@Faithfinder as of a few releases ago, all DOM events should be passed through including onMouseEnter/onMouseLeave. Make sure you're on the latest version. https://react-spectrum.adobe.com/releases/2025-07-22.html

[Faithfinder]

@Faithfinder as of a few releases ago, all DOM events should be passed through including onMouseEnter/onMouseLeave. Make sure you're on the latest version. react-spectrum.adobe.com/releases/2025-07-22.html

I thought I'm on latest but apparently we haven't upgraded since 1.10 😓 Thanks, that should work!