Opening a modal in Filament PHP

Question

I'm using filament-php framework, and in my Resource page, in a given form, after download is finished, I would like to open a modal. But thus far, I have failed to do so. There is a method afterStateUpdated that I can hook into, with Livewire compnent, which should open it up, but it just does not. Documentation: https://filamentphp.com/docs/3.x/support/blade-components/modal#controlling-a-modal-from-javascript

The modal is in the app.blade.php template listed as

<x-filament::modal id="loading" icon="heroicon-o-exclamation-triangle" icon-color="danger">
    <x-filament::loading-indicator class="h-5 w-5" />
</x-filament::modal>

In the upload form on the Resource page, I do

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Wizard::make([
                    Wizard\Step::make('Import from PDF (AI)')
                        ->schema([
                            FileUpload::make('attachment')
                                ->storeFiles(false)
                                ->afterStateUpdated(function (
                                    TemporaryUploadedFile $state,
                                    \Livewire\Component $livewire
                                ) {
                                    $livewire->dispatch('open-modal', 'loading');
                                })
                                ->live()
                        ]),

Technically this should looking at the docs fire and open up the modal action with loading. But thus far, I have not been able to make it work.

Would anybody here have experience with filament and how to approach this?

Thank you in advance!

Answer 1

I created a simple solution to open Modals within filament Forms. Everything is really simple to extend etc.

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Concerns\HasActions;
use Filament\Forms\Components\Field;
use Filament\Support\Concerns\HasDescription;
use Filament\Support\Concerns\HasHeading;

class CustomModal extends Field
{
    use HasActions;
    use HasHeading;
    use HasDescription;

    protected string $view = 'components.modals.custom-modal';
}

Use it in your form:

CustomModal::make('info_modal')
    ->heading('Info!')
    ->description('Description')
    ->registerActions([/* if neccessary */]),

The blade:

<x-filament::modal id="{{ $getName() }}" :width="'xl'">
    <div class="text-xl font-bold text-center">
        {{ $getHeading() }}
    </div>

    <div class="text-lg text-center">
        {{ $getDescription() }}
    </div>

    <div class="w-full flex justify-center mt-3">
        @if ($actions = $getActions())
            <x-filament::actions
                :actions="$actions"
            />
        @endif
    </div>
</x-filament::modal>

Now you can show this modal within your form very easy:

$livewire->dispatch('open-modal', id: 'info_modal');