[Bug Report][3.11.6] VHover can get stuck in an enabled state

[RylanBueckert-Broadsign]

Environment

Vuetify Version: 3.11.6
Vue Version: 3.5.26
OS: Windows 10 (current)

Steps to reproduce

1. Create a hoverable element with VHover
2. Hover over element while it is not disabled and then disable it
3. Stop hovering while it is disabled
4. Re-enable the VHover, and see that it stays stuck in the hovered state

Expected Behavior

The VHover model and isHovering slot prop should be false if it is currently not hovered and enabled

Actual Behavior

VHover gets stuck in hovered state if it was disabled while hovering. It stays in this state even when re-enabled

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

It may also be a bug that it stays in the hovered state at all while disabled. Its not clear to me what the intended behavior is in that case.

[J-Sek]

VHover is based on mouseenter and mouseleave.

[J-Sek]

Do you have some specific UI/UX scenario in mind?

[RylanBueckert-Broadsign]

If the hover makes an overlay with some buttons visible, but clicking the button causes the hover to be disabled, the hover gets stuck on instead of disappearing like I would expect.

Example

[J-Sek]

Workaround (for that scenario) fixed, hiding overlay upon click

[RylanBueckert-Broadsign]

Not really a workaround, since the hover is still enabled. If the goal is that the overlay won't reappear after the button is clicked (even if the element is hovered again), this fails to do that.

I think a simple approach to fix would be: when the VHover becomes disabled while it is hovered, act as if a mouseleave event had happened at that moment.

I understand that fixing this might not be high priority, but to decide to not fix at all is disappointing.

[J-Sek]

Oh.. right. Workaround demo should have :model-value="isHovering && !pending". It would be easier if isHovering would switch to false automatically, but when user keeps cursor within block boundaries and the v-hover is re-enabled, it would not reflect the state correctly - forcing user to move cursor outside and back inside again.

[RylanBueckert-Broadsign]

it would not reflect the state correctly - forcing user to move cursor outside and back inside again.

A situation like this can already happen as well. If the hover is re-enabled while it is stuck on, it will continue to act as if it is hovered until the user moves the cursor inside and back out.

A similar approach to your proposed workaround could be built into VHover to fix this issue I believe. If the VHover had an internal hover state and did not actually disable the event handlers when the component is disabled, then the isHovering slot-prop could be a computed value like isHovering = isHoveringInternal && !disabled. I made a wrapper for VHover that can do this, but I think this functionality could be built right into VHover.

In the current state, the disabled prop is not really useable unless it will not change (or is guaranteed to only change while it is impossible to be currently hovered) after it is mounted due to this issue.

[J-Sek]

Well, the workaround drops disabled, so you've got the point here. I will discuss internally if there is any use case that would be affected by the change.