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);
            });
    }

//...

}


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 />

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...
Solution
Action::make(‘addReading). The action name needs to match the method name.
Was this page helpful?