fix(toast): prevent toasts from collapsing when pointer is hovering #2771
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
When dismissing a toast by clicking the close button while the mouse is hovering over the toast group, the toasts would immediately collapse even though the cursor was still within the group. This was caused by focus restoration triggering browser hover state recalculation. This fix adds pointer tracking to only restore focus and collapse toasts when the pointer has actually left the toast group, maintaining the expected hover behavior. Changes: - Add isPointerWithin ref to track mouse position over toast group - Update REGION.BLUR handler to check pointer position before collapsing - Add guards: isPointerOut, isOverlappingAndPointerOut - Add actions: setPointerWithin, clearPointerWithin, clearFocusWithin - Only restore focus when pointer has left the group Fixes chakra-ui/ark#3628
🦋 Changeset detectedLatest commit: 5a79600 The changes in this PR will be included in the next version bump. This PR includes changesets to release 79 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@alii13 is attempting to deploy a commit to the Chakra UI Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Author
|
@segunadebayo can you please take a look and review this PR? |
Member
|
I took a look, and it works for Chrome. I couldn't get to work in Firefox, though. |
alii13
force-pushed
the
fix/toast-hover-collapse-on-dismiss
branch
from
8e0a312 to
f530642
Compare
Contributor
Author
|
Thank you @segunadebayo, for reviewing the PR. It was indeed not working for Firefox. Can you please re-review/re-validate the PR?
|
Contributor
Author
|
Bumping this up @segunadebayo - If everything looks good, can you please re-review and merge? |
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes chakra-ui/ark#3628
📝 Description
Fixes toast group collapsing unexpectedly when dismissing a toast while the mouse is still hovering over the group. This issue was originally reported in Ark UI (chakra-ui/ark#3628) and traced back to the Zag.js toast machine implementation.
⛳️ Current behavior (updates)
When dismissing a toast by clicking the close button while the mouse is hovering over the toast group:
:hoverpseudo-class is removed from the toast group momentarilymouseleave/mouseenterevents, causing flickering🚀 New behavior
With this fix:
Implementation changes:
isPointerWithinref to track mouse position over toast groupignoringMouseEventsref to temporarily block mouse events after toast removalREGION.BLURhandler to check pointer position before collapsingisPointerOut,isOverlappingAndPointerOutsetPointerWithin,clearPointerWithin,clearFocusWithin,ignoreMouseEventsTemporarily💣 Is this a breaking change (Yes/No): No
This is a bug fix that improves the user experience without changing any APIs or breaking existing functionality. The fix is framework-agnostic and applies to all implementations (React, Vue, SolidJS, Svelte).
📝 Additional Information
Testing:
Tested in the Solid examples at
http://localhost:3000/toast-overlap:Files modified:
packages/machines/toast/src/toast-group.machine.tspackages/machines/toast/src/toast-group.connect.tspackages/machines/toast/src/toast.types.tsRelated issue: chakra-ui/ark#3628
Before (Bug) ❌
Screen.Recording.2025-10-13.at.10.45.11.AM.mov
After (Fixed) ✅
Screen.Recording.2025-10-13.at.10.45.50.AM.mov