Open
Description
🐛 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.
Metadata
Assignees
Type
Projects
Status
📋 Waiting for Sprint
Activity
devongovett commentedon Apr 19, 2023
I believe the hover state only applies when the row is actually interactive, e.g. selectable or actionable. If you add
selectionMode
oronAction
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 commentedon Apr 20, 2023
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.
data-hovered
on Table column headers #5284TableColumnHeader
when 'allowSorting' is true #5471Ecksters commentedon Nov 27, 2023
It's particularly troublesome when using the
tailwind-css-react-aria-components
plugin without a prefix, as it overrides the default tailwindhover
selector, but doesn't work due to thedata-rac
being present but thedata-hovered
never being added unless you have a selectionMode other thannone
.data-hovered
apply for non-interactive rows/cells/columns #55596 remaining items