Modals make toasts inert

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

https://github.com/user-attachments/assets/9d959695-b355-4e0d-8d16-0a4f0feef2e1

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.