Standard Action not working even though Table Actions do

What I am trying to do:
Display a standard filament button/action on the page that runs specific logic

What I did:
- Following https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component
- Added both interfaces (HasForms, HasActions), and both traits (InteractsWithForms, InteractsWithActions)
- Created the action method that returns the Action
- Rendered the property within my blade view

{{ $this->testAction }}

{{ $this->testAction }}

- Tested a Filament table action with the same action logic on the same page. This works fine.
- Double checked the correct Action is used

use Filament\Actions\Action;

use Filament\Actions\Action;

- Tested a form action, confirmation modal, single action. All same result

My issue/the error:
The button correctly renders, however, clicking on it does not run any action / load any modal. A network request is successfully sent but no more. No code within

->action(fn()=>foobar())

->action(fn()=>foobar())

is triggered nor a form is displayed with

->form(...)

->form(...)

Just to re-iterate, the table action works perfectly!

Code:

Livewire full page component

class ShowKey extends Component implements HasForms, HasActions, HasTable
{
    use InteractsWithActions;
    use InteractsWithForms;
    use InteractsWithTable;

    public Key $key;

    public function table(Table $table): Table
    {
        return $table
            ->query(Key::query())
            ->columns([
                TextColumn::make('id'),
            ])
            ->headerActions([
                \Filament\Tables\Actions\Action::make('Test table action')
                    ->action(fn() => ray('test'))
            ]);
    }

    public function testAction(): Action
    {
        return Action::make('Test action')
            ->action(fn() => ray('test'))
            ->button();
    }

    public function render()
    {
        return view('livewire.keys.show-key');
    }
}

class ShowKey extends Component implements HasForms, HasActions, HasTable
{
    use InteractsWithActions;
    use InteractsWithForms;
    use InteractsWithTable;

    public Key $key;

    public function table(Table $table): Table
    {
        return $table
            ->query(Key::query())
            ->columns([
                TextColumn::make('id'),
            ])
            ->headerActions([
                \Filament\Tables\Actions\Action::make('Test table action')
                    ->action(fn() => ray('test'))
            ]);
    }

    public function testAction(): Action
    {
        return Action::make('Test action')
            ->action(fn() => ray('test'))
            ->button();
    }

    public function render()
    {
        return view('livewire.keys.show-key');
    }
}

blade

<div>
    {{ $this->table }}

    {{ $this->testAction }}
    <x-filament-actions::modals />
</div>

<div>
    {{ $this->table }}

    {{ $this->testAction }}
    <x-filament-actions::modals />
</div>

Adding an action to a Livewire component - Actions - Filament

Solution

make(‘testAction’) the function and the action name have to match. You can use ->label() to change the text.

Jump to solution

Standard Action not working even though Table Actions do

{{ $this->testAction }}

{{ $this->testAction }}

- Tested a Filament table action with the same action logic on the same page. This works fine.
- Double checked the correct Action is used

use Filament\Actions\Action;

use Filament\Actions\Action;

->action(fn()=>foobar())

->action(fn()=>foobar())

is triggered nor a form is displayed with

->form(...)

->form(...)

Just to re-iterate, the table action works perfectly!

Code:

Livewire full page component

class ShowKey extends Component implements HasForms, HasActions, HasTable
{
    use InteractsWithActions;
    use InteractsWithForms;
    use InteractsWithTable;

    public Key $key;

    public function table(Table $table): Table
    {
        return $table
            ->query(Key::query())
            ->columns([
                TextColumn::make('id'),
            ])
            ->headerActions([
                \Filament\Tables\Actions\Action::make('Test table action')
                    ->action(fn() => ray('test'))
            ]);
    }

    public function testAction(): Action
    {
        return Action::make('Test action')
            ->action(fn() => ray('test'))
            ->button();
    }

    public function render()
    {
        return view('livewire.keys.show-key');
    }
}

class ShowKey extends Component implements HasForms, HasActions, HasTable
{
    use InteractsWithActions;
    use InteractsWithForms;
    use InteractsWithTable;

    public Key $key;

    public function table(Table $table): Table
    {
        return $table
            ->query(Key::query())
            ->columns([
                TextColumn::make('id'),
            ])
            ->headerActions([
                \Filament\Tables\Actions\Action::make('Test table action')
                    ->action(fn() => ray('test'))
            ]);
    }

    public function testAction(): Action
    {
        return Action::make('Test action')
            ->action(fn() => ray('test'))
            ->button();
    }

    public function render()
    {
        return view('livewire.keys.show-key');
    }
}

blade

<div>
    {{ $this->table }}

    {{ $this->testAction }}
    <x-filament-actions::modals />
</div>

<div>
    {{ $this->table }}

    {{ $this->testAction }}
    <x-filament-actions::modals />
</div>

Adding an action to a Livewire component - Actions - Filament

Solution

make(‘testAction’) the function and the action name have to match. You can use ->label() to change the text.

Jump to solution

Standard Action not working even though Table Actions do

Standard Action not working even though Table Actions do

Similar Threads

Similar Threads

Similar Threads