Action modal in livewire component not working

I am having an issue displaying a modal in a livewire component using a Filament Action

I have followed the docs from:
https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component

This is how it looks like:

class MyTab extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;


    public function addReadingAction(): Action
    {
        return Action::make('Modal')
            ->form([ $this->getReadingsForm() ])
            ->action( function ($data) {
                dd($data);
            });
    }

//...

}

class MyTab extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;


    public function addReadingAction(): Action
    {
        return Action::make('Modal')
            ->form([ $this->getReadingsForm() ])
            ->action( function ($data) {
                dd($data);
            });
    }

//...

}

The component:

        <div class="flex justify-between align-middle my-8">
            <h2 class="text-2xl font-bold">Readings</h2>
            {{ $this->addReadingAction }}
        </div>
        
        <x-filament-actions::modals />

        <div class="flex justify-between align-middle my-8">
            <h2 class="text-2xl font-bold">Readings</h2>
            {{ $this->addReadingAction }}
        </div>
        
        <x-filament-actions::modals />

The button shows, on click it loads, but no modal appears

When I apply this same action in a Filament page it works and shows correctly, I am unsure to why this is...

Adding an action to a Livewire component - Actions - Filament

Solution

Action::make(‘addReading’). The action name needs to match the method name.

Jump to solution

Action modal in livewire component not working

class MyTab extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;


    public function addReadingAction(): Action
    {
        return Action::make('Modal')
            ->form([ $this->getReadingsForm() ])
            ->action( function ($data) {
                dd($data);
            });
    }

//...

}

class MyTab extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;


    public function addReadingAction(): Action
    {
        return Action::make('Modal')
            ->form([ $this->getReadingsForm() ])
            ->action( function ($data) {
                dd($data);
            });
    }

//...

}

The component:

        <div class="flex justify-between align-middle my-8">
            <h2 class="text-2xl font-bold">Readings</h2>
            {{ $this->addReadingAction }}
        </div>
        
        <x-filament-actions::modals />

        <div class="flex justify-between align-middle my-8">
            <h2 class="text-2xl font-bold">Readings</h2>
            {{ $this->addReadingAction }}
        </div>
        
        <x-filament-actions::modals />

The button shows, on click it loads, but no modal appears

When I apply this same action in a Filament page it works and shows correctly, I am unsure to why this is...

Adding an action to a Livewire component - Actions - Filament

Solution

Action::make(‘addReading’). The action name needs to match the method name.

Jump to solution

Action modal in livewire component not working

Action modal in livewire component not working

Similar Threads

Similar Threads

Similar Threads