Skip to content

[toast] Collapse the viewport when the pointer leaves after closing the hovered toast - #6201

Open
lord-0011 wants to merge 1 commit into
mui:masterfrom
lord-0011:fix/toast-viewport-collapse-after-close
Open

lord-0011 wants to merge 1 commit into
mui:masterfrom
lord-0011:fix/toast-viewport-collapse-after-close

Conversation

@lord-0011

@lord-0011 lord-0011 commented Nov 7, 2026 •

Copy link
Copy Markdown

Fixes #6162

When the toast under the pointer is closed with the mouse (its Toast.Close), the viewport keeps data-expanded after the pointer moves away. The stack only collapses after the pointer enters a toast again and leaves.

Cause: when the hovered element is removed, the browser sends no mouseout from the viewport. The next pointer move only dispatches a mouseover on the element now under the pointer, with a relatedTarget React still manages. React's enter/leave handling waits for a matching mouseout that never comes, so ToastViewport's onMouseLeave (handleMouseLeave) never runs and hovering stays true.

Fix: while the viewport is expanded, ToastViewport listens for mouseover on the owner document (capture). If the pointer lands outside the viewport while hovering is still set, it runs the existing handleMouseLeave, so the current deferrals still apply (exit transitions, an active touch swipe) and timers resume as before. The listener only exists while the viewport is expanded, and mouseover fires only when the pointer moves onto a different element. Focus-driven expansion is unaffected because the handler checks hovering.

Test: "collapses when the pointer moves away after the hovered toast was closed" in ToastViewport.test.tsx. It hovers a toast, closes it, then dispatches mouseover on document.body. It fails without the change (data-expanded still present) and passes with it.

Verification:

  • pnpm test:jsdom --run packages/react/src/toast: 350 passed, 47 skipped.
  • pnpm test:chromium --run packages/react/src/toast/viewport/ToastViewport.test.tsx: 66 passed, 11 skipped.
  • ESLint, Prettier and pnpm --filter @base-ui/react typescript pass.
  • Manually, with @base-ui/react 1.9.0 and real mouse input (Playwright, Chromium), three stacked toasts with timeout: 0: hover → click Close → move the pointer away left the viewport expanded in 3/3 runs, and collapsed in 3/3 runs with this change. Hover-and-leave without closing a toast collapses in both.

The issue also mentions the swipe case. With my setup, swiping the hovered toast away and moving the pointer off collapsed the viewport even before this change, so I couldn't reproduce that part. This PR only covers the close-button case.

AI disclosure: I used an AI coding assistant to help investigate and prepare this change. I reviewed the diff and the test, and checked that the test fails without the fix.

@pkg-pr-new

pkg-pr-new Bot commented Nov 7, 2026

Copy link
Copy Markdown

commit: 9e4484b

@code-infra-dashboard

code-infra-dashboard Bot commented Nov 7, 2026 •

Copy link
Copy Markdown

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 🔺+156B(+0.03%) 🔺+47B(+0.03%)

Details of bundle changes

Performance

No regressions in 36 benchmarks · ran 4m 06s · details


Check out the code infra dashboard for more information about this PR.

@netlify

netlify Bot commented Nov 7, 2026

Copy link
Copy Markdown

✅ Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 9e4484b
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6aef0f339f5346cb8c11a3d1
😎 Deploy Preview https://deploy-preview-6201--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[toast] Viewport stays expanded after the hovered toast is removed by the pointer

1 participant