How to use <x-filament::modal>

[bomshteyn]

Hi i have a complex, custom form page where on a click of a button i want to open a modal with some extra data.

Can x-filament::modal be used for this? It's not an action so i need to be opened on a click of a custom button (wire:click)

I tried using this instructions for wire-elements/modal, but while the screen was graying out on opening the modal, meaning the overlay was opening the actual modal was not visible on the page.

[danharrin]

For example, if you wanted a form modal:

<form wire:submit.prevent="livewireSubmitMethodHere">
    <x-filament::modal>
        <x-slot name="trigger">
            <button type="button" x-on:click="isOpen = true">Open</button>
        </x-slot>

        <x-slot name="header">
            Modal heading
        </x-slot>

        Form components here

        <x-slot name="actions">
            <button type="submit">
                 Submit form
            </button>
        </x-slot>
    </x-filament::modal>
</form>

But you can strip out the form stuff and use it for any use case

There are also browser events you can use to open and close the modal dynamically based on its ID. Check out modal/index.blade.php in the support package.

[bomshteyn]

Is there a way to open it through wire:click on an external button?

[danharrin]

Yeah, dispatch the open-modal browser event with ['id' => 'MODAL_ID_HERE'] from Livewire

Or if it doesnt need a server request, use x-on:click with $dispatch

[bomshteyn]

thanks

[hazhayder]

How would I loading indicator on the button

[leandrocfe]

I think you can use form

<x-filament::button 
form="livewireSubmitMethodHere" 
type="submit">
submit
</x-filament::button>

[raphaelcangucu]

Hi all!

To close inside the Component you can call:

$this->dispatchBrowserEvent('close-modal', ['id' => 'modal-twofa-gateway']);

And here is a good example using a form and a modal:

<div>
    <form wire:submit.prevent="allowGateway">
        <x-filament::modal id="modal-twofa-gateway">
            <x-slot name="trigger">
                <x-filament::button type="button" x-on:click="isOpen = true">
                    {{ $this->buttonText}}
                </x-filament::button>
            </x-slot>

            <x-slot name="header">
                {{ $this->headerTitle ?? 'Confirm 2FA activation'}}
            </x-slot>

            {{ $this->form }}

            <x-slot name="actions">
                <x-filament::button type="submit">
                    {{ $this->buttonText }}
                </x-filament::button>
            </x-slot>
        </x-filament::modal>
    </form>
</div>

[Giasinit]

For me, this works:

dispatchEvent( new CustomEvent('open-modal', { detail: { id: 'conferma-acquisto', } }) ); 

[mrizwan47]

Just a quick note for people coming from search engine, this worked:

$this->dispatch('open-modal', id: 'modal-twofa-gateway');

instead of:

$this->dispatchBrowserEvent('open-modal', ['id' => 'modal-twofa-gateway']);