-
-
Notifications
You must be signed in to change notification settings - Fork 230
fix(toast): prevent toasts from collapsing when pointer is hovering #2771
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
+48
−10
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: 8e0a312 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.
💡 Enable Vercel Agent with 100ドル free credit for automated AI reviews |
@segunadebayo can you please take a look and review this PR?
I took a look, and it works for Chrome. I couldn't get to work in Firefox, though.
Use double requestAnimationFrame for blur handling to ensure hover state is properly settled before processing blur events. This fixes the issue where Firefox would still collapse toasts when hovering due to different timing in hover state recalculation.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Uh oh!
There was an error while loading. Please reload this page.
Closes chakra-ui/ark#3628
📝 Description
Fixes toast group collapsing unexpectedly when dismissing a toast while the mouse is still hovering over the group in the SolidJS implementation. This issue was originally reported in Ark UI (chakra-ui/ark#3628) where it only affected SolidJS, while React and Vue implementations worked correctly. The issue was traced back to the Zag.js toast machine implementation.
⛳️ Current behavior (updates)
SolidJS only: 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 momentarilyReact and Vue implementations did not have this issue.
🚀 New behavior
With this fix:
Implementation changes:
isPointerWithinref to track mouse position over toast groupREGION.BLURhandler to check pointer position before collapsingisPointerOut,isOverlappingAndPointerOutsetPointerWithin,clearPointerWithin,clearFocusWithin💣 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
Affected framework: SolidJS (React and Vue were not affected)
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.types.tsRelated issue: chakra-ui/ark#3628 (SolidJS-specific bug)
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