Toast in flyout close button triggers underlying button

[philippbuerger]

Hi, I have a flyout with a form in it. The submit triggers a toast which is shown exactly over the save button of the form. When I pressing the close button of the toast, the toast is closed but also the underlying button is triggerd so the form is submitted again and again.

[philippbuerger]

Just tested it with the toast rendered at another position and I noticed that the close button of the toast is not reacting. I seems that there is not click event on the toast when triggered with an open flyout / modal.

[calebporzio]

I was able to recreate the bug. I'll post the code here for future reference.

This is actually a bug in the way browsers handle popovers on-top of elements that were triggered using .showModal().

I will try to raise some awareness around this issue and see if there are any plans on fixing it. I'll leave this open until I can at least confirm it's a browser bug. Thank you.

<?php

use Livewire\Volt\Component;

new class extends Component {
    public function triggerToast()
    {
        Flux::toast(text: 'I am a toast that will pop up over the submit button in the flyou modal.');
    }
};
?>

<div>
    <flux:modal.trigger name="edit-profile">
        <flux:button>Open Dialog</flux:button>
    </flux:modal.trigger>

    <flux:modal name="edit-profile" class="max-w-lg flex flex-col justify-between" variant="flyout">
        <flux:text>Press the button to trigger the toast and observe that the toast's close button doesn't work and all mouse events pass through to the underlying button.</flux:text>

        <flux:button wire:click="triggerToast">Trigger toast</flux:button>
    </flux:modal>
</div>