Skip to content

fix(Toaster): prevent onClick from being called twice - #6980

Merged
benjamincanac merged 1 commit into
nuxt:v4from
lazerg:fix/issue-6972-toast-onclick-bound-twice
Sep 21, 2026
Merged

benjamincanac merged 1 commit into
nuxt:v4from
lazerg:fix/issue-6972-toast-onclick-bound-twice

Conversation

@lazerg

@lazerg lazerg commented Sep 18, 2026

Copy link
Copy Markdown
Contributor

🔗 Linked issue

Resolves #6972

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Toaster spreads the whole toast onto <UToast> and also binds @click="toast.onClick && toast.onClick(toast)". ToastProps has no onClick prop and ToastEmits no click emit, so the spread onClick falls through as a second native listener. mergeProps only drops a duplicate when both handlers are the same function reference, and the inline one isn't, so a single click runs the user handler twice: once with the MouseEvent, once with the Toast. The second call also contradicts the documented onClick?: (toast: Toast) => void signature, and any handler that isn't idempotent, adding a toast for instance, does its work twice.

This adds onClick to the omit list so only the explicit @click survives, the same fix as cbed0cc for EditorToolbar in #5784, with a test in Toast.spec.ts that clicks a rendered toast and counts the calls.

📝 Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@github-actions github-actions Bot added the v4 #4488 label Sep 18, 2026
@coderabbitai

coderabbitai Bot commented Sep 18, 2026

Copy link
Copy Markdown
Contributor

Review Change StackReview Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: f029f0be-0b92-4c20-b946-a0ddcd5ec042

📥 Commits

Reviewing files that changed from the base of the PR and between a96823d and 74cab35.

📒 Files selected for processing (2)
  • src/runtime/components/Toaster.vue
  • test/components/Toast.spec.ts

Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.


📝 Walkthrough

Walkthrough

The Toaster component now omits onClick from the props spread onto UToast. The callback remains handled by the dedicated click listener. A test creates a toast with a mocked callback, clicks the rendered toast, and verifies one invocation with the toast id and title.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 74cab

The toast click fix satisfies the stated behavior and no concrete merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Linked Issues check ✅ Passed The change satisfies #6972. Toaster.vue now omits onClick from the v-bind spread, so only the explicit @click handler calls toast.onClick(toast). The new Toast.spec.ts test verifies one ca…
Out of Scope Changes check ✅ Passed The pull request changes only the Toaster.vue binding and adds a focused regression test in Toast.spec.ts. Both changes directly support #6972. No unrelated production behavior or unrelated files …
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Title check ✅ Passed The title clearly identifies the Toaster bug fix and states that duplicate onClick calls are prevented.
Description check ✅ Passed The description directly explains the duplicate onClick behavior, the implementation change, the test coverage, and the linked issue.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@codspeed

codspeed Bot commented Sep 18, 2026

Copy link
Copy Markdown

Merging this PR will not alter performance

✅ 31 untouched benchmarks


Comparing lazerg:fix/issue-6972-toast-onclick-bound-twice (74cab35) with v4 (a96823d)

Open in CodSpeed

@pkg-pr-new

pkg-pr-new Bot commented Sep 18, 2026

Copy link
Copy Markdown
npm i https://pkg.pr.new/@nuxt/ui@6980

commit: 74cab35

@benjamincanac benjamincanac left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! 😊

@benjamincanac
benjamincanac merged commit 796f79d into nuxt:v4 Sep 21, 2026
24 checks passed

This branch was successfully deployed

1 active deployment
Preview – ui 74cab35a Deployed Sep 18, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Toast: onClick is bound twice, so the handler runs twice per click

2 participants