Hover does not work on ListBoxItem

[VapidLinus]

Provide a general summary of the issue here

I was trying to apply a hover effect on a ListBoxItem using "hover:bg-gray-200" but it wasn't applying. So I tried if the onHoverStart callback or the isHovered children arg seem to work at all, but they seem to have no effect.

🤔 Expected Behavior?

• tw data attribute styles like hover: should work on ListBoxItem
• onHoverStart should be called when the mouse enters the ListBoxItem
• The isHovered children arg should be true when ListBoxItem is hovered

😯 Current Behavior

Hover does not seem to affect the ListBoxItem at all

💁 Possible Solution

No response

🔦 Context

There is a comment by reidbarber that claims this should have been added:
#6260 (comment)

🖥️ Steps to Reproduce

I have included a CodeSandBox:
https://codesandbox.io/p/sandbox/rac-listboxitem-no-hover-5shgjx

Preview:

export default function App() {
  return (
    <ListBox>
      <ListBoxItem onHoverStart={() => alert("hover")}>
        {({ isHovered }) => <p>{isHovered ? "hover" : "idle"}</p>}
      </ListBoxItem>
    </ListBox>
  );
}

Version

1.13.0

What browsers are you seeing the problem on?

Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[rothsandro]

Hover is only enabled if either selection is enabled or an action callback is provided.

// Selection
<ListBox selectionMode="single">...</ListBox>

// On Action
<ListBox onAction={() => { ... }}>...</ListBox>

https://codesandbox.io/p/sandbox/rac-listboxitem-no-hover-5shgjx

[reidbarber]

Seems similar to #4411

[LFDanLu]

As mentioned above, our stance is that hover should only be applied if the row is actionable/selectable. If you'd like to override this behavior, you can apply this via css directly similar to #4411 (comment)