Hover not working if first interaction on page (in tests) #9169
Closed
rothsandro
started this conversation in
General
Replies: 1 comment 1 reply
-
|
Oh damn, just saw there was already a discussion: #9005 |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hey 👋 ,
I'm using RAC and I noticed an issue with the Tooltip component. If hovering over the trigger is the first interaction on the page, the tooltip will not be shown. This can be reproduced in the docs:
Screen.Recording.2025-11-11.at.19.13.25.mov
This is definitely not a very common way for users to interact with an app 😅 but I noticed the same problem when writing a test for the component. I use Vitest with its Browser Mode and calling
hover()doesn't trigger the tooltip:It works if I trigger another interaction before hovering over the button (like hovering over a different button first or clicking on a different button). Another workaround is to call
setInteractionModality("pointer")before hovering over the trigger.The tooltip trigger checks the interaction modality and only shows the tooltip for "pointer":
react-spectrum/packages/@react-aria/tooltip/src/useTooltipTrigger.ts
Line 87 in 2485ffa
The interaction modality is set to "pointer" when a
pointermoveevent is triggered on the document:react-spectrum/packages/@react-aria/interactions/src/useFocusVisible.ts
Lines 153 to 155 in 2485ffa
The
hover()in my test first emits the pointer events on the button and only after that emits a pointer event on the document, so it's already too late.Is this a bug that could be fixed or what's the recommended way to handle this case in tests?
Beta Was this translation helpful? Give feedback.
All reactions