fix: toast issue in firefox

Author: alii13

.changeset/neat-pigs-dance.md

@@ -5,8 +5,19 @@
 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. This was caused by focus restoration
-triggering browser hover state recalculation.
+toasts to immediately collapse, even though the cursor was still within the group.
 
-The 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.
+**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.

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

@@ -39,10 +39,25 @@ export function groupConnect<T extends PropTypes, O = any>(
         "aria-live": "polite",
         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
+          }
+          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
+          }
           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
+          }
           send({ type: "REGION.POINTER_LEAVE", placement })
         },
         onFocus(event) {

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

@@ -24,6 +24,7 @@ export const groupMachine = createMachine<ToastGroupSchema>({
       lastFocusedEl: null,
       isFocusWithin: false,
       isPointerWithin: false,
+      ignoringMouseEvents: false,
       dismissableCleanup: undefined,
     }
   },
@@ -80,7 +81,7 @@ export const groupMachine = createMachine<ToastGroupSchema>({
       },
     ],
     "TOAST.REMOVE": {
-      actions: ["removeToast", "removeHeight"],
+      actions: ["removeToast", "removeHeight", "ignoreMouseEventsTemporarily"],
     },
     "TOAST.PAUSE": {
       actions: ["pauseToasts"],
@@ -259,6 +260,14 @@ export const groupMachine = createMachine<ToastGroupSchema>({
         refs.set("lastFocusedEl", null)
         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)
+      },
     },
   },
 })

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

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