`Active` state in components are returning true on element hover

The Active state inside your componenets are returning true when cursor is hovered over the element.

Snippet of code

{({ active }) => (
            <a className={`${active && 'bg-blue-500'}`} href="/account-settings">
              Account settings
            </a>
          )}

[Snazzie]

I dont think its correct merging these different behaviors into one. 😃

[morganfeeney]

This is confusing terminology, I was expecting active to mean what it says. FWIW: I’ve ended up on this issue because I was looking for clarification, I don’t think the docs cover it as well as they could.

e.g.

which tells you if the item is currently focused via the mouse or keyboard

No idea what that means

@RobinMalfait What you say here is a better explanation:

We make menu items and listbox options “active” when that specific item is active being hovered (mouse) or active via keyboard shortcuts. You can still use the active:…, focus:…, and hover: tailwind classes if you want. This is just extra state that we expose to make your components more consistent for both keyboard and mouse users.

It could be beneficial for other users to reopen this issue and the docs could be updated as the outcome?