refactor: setTimeout -> raf

Author: segunadebayo

.changeset/neat-pigs-dance.md

@@ -2,22 +2,5 @@
 "@zag-js/toast": patch
 ---
 
-fix(toast): prevent toasts from collapsing when pointer is hovering
-
-Fixed an issue where dismissing a toast by clicking the close button while hovering over the toast group would cause
-toasts to immediately collapse, even though the cursor was still within the group.
-
-**Root causes:**
-
-1. **All browsers:** Focus restoration to the trigger button causes the browser to recalculate hover state, removing the
-   `:hover` pseudo-class momentarily
-2. **Some browsers (particularly Firefox):** DOM mutations (removing toasts) can trigger spurious `mouseleave`/
-   `mouseenter` events even when the mouse hasn't moved, causing flickering when multiple toasts are dismissed rapidly
-
-**Solution:**
-
-- Add `isPointerWithin` tracking to only restore focus when pointer has actually left the toast group
-- Add `ignoringMouseEvents` flag that blocks all mouse events for 100ms after toast removal
-- This prevents spurious event cycles during DOM mutations from triggering unwanted expand/collapse actions
-
-This maintains the expected hover behavior across all browsers while preserving accessibility for keyboard users.
+Fix issue where toasts collapse immediately when dismissing while hovering, by tracking pointer state and temporarily
+ignoring spurious mouse events during DOM mutations using requestAnimationFrame.

packages/machines/toast/src/toast-group.connect.ts

@@ -40,24 +40,15 @@ export function groupConnect<T extends PropTypes, O = any>(
         role: "region",
         style: getGroupPlacementStyle(service, placement),
         onMouseEnter() {
-          // Ignore mouse events briefly after toast removal to prevent spurious events during DOM mutations
-          if (refs.get("ignoringMouseEvents")) {
-            return
-          }
+          if (refs.get("ignoreMouseTimer") !== null) return
           send({ type: "REGION.POINTER_ENTER", placement })
         },
         onMouseMove() {
-          // Ignore mouse events briefly after toast removal to prevent spurious events during DOM mutations
-          if (refs.get("ignoringMouseEvents")) {
-            return
-          }
+          if (refs.get("ignoreMouseTimer") !== null) return
           send({ type: "REGION.POINTER_ENTER", placement })
         },
         onMouseLeave() {
-          // Ignore mouse events briefly after toast removal to prevent spurious events during DOM mutations
-          if (refs.get("ignoringMouseEvents")) {
-            return
-          }
+          if (refs.get("ignoreMouseTimer") !== null) return
           send({ type: "REGION.POINTER_LEAVE", placement })
         },
         onFocus(event) {

packages/machines/toast/src/toast-group.machine.ts

@@ -27,7 +27,7 @@ export const groupMachine = createMachine({
       lastFocusedEl: null,
       isFocusWithin: false,
       isPointerWithin: false,
-      ignoringMouseEvents: false,
+      ignoreMouseTimer: null,
       dismissableCleanup: undefined,
     }
   },
@@ -62,7 +62,7 @@ export const groupMachine = createMachine({
     })
   },
 
-  exit: ["clearDismissableBranch", "clearLastFocusedEl"],
+  exit: ["clearDismissableBranch", "clearLastFocusedEl", "clearIgnoreMouseTimer"],
 
   on: {
     "DOC.HOTKEY": {
@@ -263,12 +263,23 @@ export const groupMachine = createMachine({
         refs.set("isFocusWithin", false)
       },
       ignoreMouseEventsTemporarily({ refs }) {
-        // Ignore mouse events briefly after toast removal to prevent spurious events
-        // during DOM mutations (particularly in Firefox, but applied universally for consistency)
-        refs.set("ignoringMouseEvents", true)
-        setTimeout(() => {
-          refs.set("ignoringMouseEvents", false)
-        }, 100)
+        const existingTimer = refs.get("ignoreMouseTimer")
+        if (existingTimer !== null) {
+          cancelAnimationFrame(existingTimer)
+        }
+
+        const timerId = requestAnimationFrame(() => {
+          refs.set("ignoreMouseTimer", null)
+        })
+
+        refs.set("ignoreMouseTimer", timerId)
+      },
+      clearIgnoreMouseTimer({ refs }) {
+        const timerId = refs.get("ignoreMouseTimer")
+        if (timerId !== null) {
+          cancelAnimationFrame(timerId)
+          refs.set("ignoreMouseTimer", null)
+        }
       },
     },
   },

packages/machines/toast/src/toast.types.ts

@@ -247,7 +247,7 @@ export type ToastGroupSchema = {
     lastFocusedEl: HTMLElement | null
     isFocusWithin: boolean
     isPointerWithin: boolean
-    ignoringMouseEvents: boolean
+    ignoreMouseTimer: number | null
   }
   guard: string
   effect: string