Modals make toasts inert

[mauritskorse]

Flux version

v2.2.6

Livewire version

v3.6.4

Tailwind version

v4.1.11

Browser and Operating System

Chrome

What is the problem?

When a modal is open any other element becomse inert (this is because the dialogs are html5 model dialogs). Generally this seems fine, but there are some cases where this becomes confusing. For example;

When a toast is triggered from a modal, the toast is shown including a dismiss button. But the dismiss button is inert and won't work. On a default centered modal, trying to dismiss the toast will cause the modal to close and requires a second click to dismiss the toast. On a flyout modal, the modal doesn't close, but it becomes clear that the toast is inert.

Another use case is that when a cookie-consent is present on the page and a modal is opened, the cookie consent can still be shown on top of the modal, but interacting with that cookie consent popover is not possible anymore.

Code snippets to replicate the problem

<?php

use Livewire\Volt\Component;
use Flux\Flux;

new class extends Component {

    public function showToast(){
        Flux::toast('Can you dismiss me?');
    }
}; ?>

<div class="container h-full flex flex-col items-center justify-center gap-4 ">
    
        <flux:modal.trigger name="center-modal">
            <flux:button>Open center modal</flux:button>
        </flux:modal.trigger>

        <flux:modal.trigger name="flyout-modal">
            <flux:button>Open flyout</flux:button>
        </flux:modal.trigger>


        <flux:modal name="center-modal">
            <flux:button wire:click="showToast">Show toast</flux:button>
        </flux:modal>

        <flux:modal variant="flyout" name="flyout-modal">
            <flux:button wire:click="showToast">Show toast</flux:button>
        </flux:modal>

        <flux:toast />
</div>

Screenshots/ screen recordings of the problem

2025-08-27.11-26-22.mp4

How do you expect it to work?

Elements that are shown as if active - when a modal is open - and that provide interactive elements, should be interactive.

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.

[mauritskorse]

For my own use case I am implementing a custom modal based on the following mock-up. It is combination of a non-modal dialog and the popover api. It does not make other elements inert by default.

<?php

use Livewire\Volt\Component;
use Flux\Flux;

new class extends Component {

    public function showToast(){
        Flux::toast('Can you dismiss me?');
    }
}; ?>

<div class="container w-full h-full">
    <div class="w-full h-full flex flex-col items-center mt-[20vh] gap-4">
        <flux:heading>non-modal dialog</flux:heading>
        <flux:button popovertarget="custom-modal">show modal</flux:button>
    </div>

    <dialog popover="manual"
        id="custom-modal"
        class="fixed before:bg-gray-500/20 before:content-[''] before:z-10 before:fixed before:inset-0 focus:outline-0 p-6 before:pointer-events-none"
        {{-- document.querySelector('body').inert = true --}}
        @click.outside="$el.hidePopover()" 
        @keydown.document.escape="$el.hidePopover()"
    > 
        <div class="relative z-10 
                   p-6 shadow-lg rounded-xl bg-white dark:bg-zinc-800 border border-transparent dark:border-zinc-700
                   min-w-64 w-fit-content aspect-video space-y-4"
        >
            <div class="absolute right-3 top-3 content">
                <flux:button x-on:click="$el.closest('dialog').hidePopover()" icon="x-mark" variant="subtle" />
            </div>
            <flux:heading>Non-modal dialog</flux:heading>
            <flux:button wire:click="showToast">show toast</flux:button>
        </div>
    </dialog>
</div>

[shamil8124]

Yep seeing the same issue. Flyout modal with a toast in the middle, toast cannot be dismissed.

[francisgradient]

I am facing this same issue. Can't close the toasts when the flyout modal is active..!! @joshhanley

[joshhanley]

@mauritskorse thanks for reporting! This issue has been raised before, the issue is the browser is blocking the toasts due to how dialogs work. See Caleb's write up here for details #164 (comment). Not sure what we can do about it, but we'll have a chat about internally to see if there are any options.

[mauritskorse]

Ah, I missed that write up of Caleb.
The 'problem' is that the top-layer is completely managed by the browser and according to specs it cannot be manipulated. The only work around seems to reopen a dialog that you want to show on top after another dialog was opened. You really need to close it first and then open it.

For as long the 3wc spec doesn't change and allows for manipulating the stack-order there is no real solution I guess. The only option I see is that it might be useful if the flux modals have an option to be of a non-modal type.

[Dev-Wolfpack]

Hi,

I am seeing the same issue.

I have resolved it temporarily by moving the flux:toast or flux:toast.group inside the modal container. Although this then breaks loading toast globally.

One idea could be to create a small script to move the global toast container into the modal when the container is opened, and then move it back to the original location when closed?

[raz-iacob]

I have encounter the same issue. It would be cool to find a solution for the toasts.