Two toasts displayed for a single Flux::toast() call when using flux:toast.group with flux:toast inside

[alex8013]

Flux version

v2.13.2

Livewire version

v4.2.4

Tailwind version

v4.2.2

Browser and Operating System

Browser: All browsers tested (Firefox, Chrome) - issue is not browser-specific | Operating System: Windows 11

What is the problem?

When using <flux:toast.group position="top end"><flux:toast /></flux:toast.group> as shown in the official documentation, every Flux::toast() call displays two toasts simultaneously instead of one.
Investigation confirmed:

Only one ui-toast-group and one ui-toast exist in the DOM
Livewire response contains only one toast-show dispatch
showToast is called only once (confirmed via console.trace)
The issue occurs on all browsers (Firefox, Chrome) and all pages

The only workaround is to use <flux:toast /> alone without flux:toast.group, which correctly shows a single toast.

Code snippets to replicate the problem

<flux:toast.group position="top end">
<flux:toast />
</flux:toast.group>

Screenshots/ screen recordings of the problem

How do you expect it to work?

A single Flux::toast() call should display exactly one toast notification. When using flux:toast.group<flux:toast /></flux:toast.group> as documented, only one toast should appear at a time.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@alex8013 thanks for reporting! I've investigated this and am unable to reproduce the issue. Are you able to provide a small example repo that demonstrates the issue so we can investigate? Thanks!

[alex8013]

---

@joshhanley Hi, I apologize for not being able to provide a minimal reproduction repo — my project is very complex with many dependencies and I was unable to isolate the issue in a fresh install.

However, I was able to confirm the root cause and test a fix directly in the browser DevTools console.

Root cause: ui-toast uses popover="manual" which causes the browser's Popover API to move the element to the top layer, breaking the DOM hierarchy. After this happens, $el.closest('ui-toast-group') returns null even when ui-toast is defined inside ui-toast-group — causing both elements to handle the toast-show event simultaneously, resulting in two toasts.

I tested this fix in the browser console:

const toast = document.querySelector('ui-toast');
toast._inGroup = !!toast.closest('ui-toast-group');
const origShow = toast.showToast.bind(toast);
toast.showToast = function(options) {
    if (this._inGroup) return;
    return origShow(options);
};

This works correctly for both cases:

• <flux:toast.group><flux:toast /></flux:toast.group> → single toast ✓
• <flux:toast /> standalone → single toast ✓

Suggested fix in flux.js:

// In UIToast.mount():
mount() {
    this._inGroup = !!this.closest("ui-toast-group");
    if (this._inGroup) return;
    // ... rest of existing mount code
}

// In UIToast.showToast():
showToast(options = {}) {
    if (this._inGroup) return;
    // ... rest of existing showToast code
}

Hope this helps narrow it down!

---

Update: After testing this fix in the browser console, it completely resolved the double toast issue in my project. The fix works correctly for both flux:toast.group<flux:toast /></flux:toast.group> and <flux:toast /> standalone usage.
I am currently using this as a temporary workaround by applying the patch via a custom JS file loaded in my layout, until an official fix is released.

[joshhanley]

@alex8013 ah bugger. Thanks for the fix, but unfortunately we can't add it unless we can reproduce the issue and write a test to ensure it doesn't happen again. Re the toast being a popover, the ui-toast shouldn't be opening it's own popover when wrapped in a ui-toast-group. The toast group popover should be opened instead (or both are opened, but the top layer will still maintain the dom structure so .closest() should still work). Do you maybe have something going on that might be detaching the toast or something?

[alex8013]

@joshhanley I found the root cause! The issue is related to the CSP (Content Security Policy) configuration in Laravel Livewire.

In my config/livewire.php:

'csp_safe' => false, // single toast ✓
'csp_safe' => true, // duplicated toast ✗

When csp_safe is set to true, the toast is duplicated. When set to false, only one toast appears correctly.

After identifying this, I was also able to reproduce the same issue in a fresh repository installation.

This explains why I couldn't reproduce it at first — the default value is false. The bug only occurs when csp_safe => true is enabled.

[joshhanley]

@alex8013 thanks for that! Yep that was it, I was able to replicate the issue. Turns out there is a bug in Alpine's CSP build, so I have submitted a PR to fix it. You can now see why we prefer to be able to replicate the issue as you never know truely where the issue might lie, Flux, Livewire or Alpine 😬.

[troccoli-sgr]

Thanks @joshhanley and @calebporzio.

Do I have to wait for a new release of Flux to get the new AlpineJS build?

[joshhanley]

@troccoli-sgr nope! Flux doesn’t use Alpine. I tagged a Livewire release earlier with the fix, so just update that and you should be all good 😁

[troccoli-sgr]

Flux doesn’t use Alpine.

Of course, duh! Sorry for the silly question. 😄