Skip to content

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

Open
@jaknas

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.

Activity

changed the title Table(react-aria-components): `[data-hovered]` does not work Table(react-aria-components): `[data-hovered]` does not work for `<Row/>` on Apr 19, 2023
devongovett

devongovett commented on Apr 19, 2023

@devongovett
Member

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

jaknas commented on Apr 20, 2023

@jaknas
Author

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.

moved this from ✏️ To Groom to 📋 Waiting for Sprint in RSP Component Milestoneson May 31, 2023
added
documentationImprovements or additions to documentation
and removed
bugSomething isn't working
on Aug 23, 2023
Ecksters

Ecksters commented on Nov 27, 2023

@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.

6 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    RACdocumentationImprovements or additions to documentation

    Type

    No type

    Projects

    • Status

      📋 Waiting for Sprint

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Table(react-aria-components): `[data-hovered]` does not work for `<Row/>` · Issue #4411 · adobe/react-spectrum