FilamentF
Filament•17mo ago
Grégoire

Handling dispatch events with named parameters in Filament Action

Hi 👋

I'm trying to dispatch a Wire Element Pro event to open a slide-over from within a reusable Filament action. While this works seamlessly when the action is defined within a Livewire component, it doesn't seem to work as expected in a Filament action.

Here’s the code that works well in a Livewire component:

public function joinTeamAction()
{
    return Action::make('joinTeam')
        ->action(fn() => $this->dispatch('slide-over.open', component: 'settings.team.switch-team-slide-over'));
}

However, when I try to achieve the same in a Filament action extended class, I encounter issues. Specifically, I believe the dispatch method from the CanDispatchEvent trait differs from Livewire's HandlesEvent logic, causing the following problems:

class JoinTeamAction extends Action
{
    protected function setUp()
    {
        parent::setUp();

        $this
            ->action(function () {
                // Unknown named parameter $component
                $this->dispatch(
                    'slide-over.open',
                    component: 'settings.team.switch-team-slide-over'
                );

                // The event doesn't trigger the slide-over
                $this->dispatch(
                    'slide-over.open',
                    ['component' => 'settings.team.switch-team-slide-over']
                );
            });
    }
}

  • Named Parameters: The first approach using named parameters (component: 'settings.team.switch-team-slide-over') results in an "Unknown named parameter $component" error.
  • Array Syntax: The 2nd approach using an associative array doesn't throw an error, but it fails to trigger the slide-over event as intended.
I also realise that $this->js() is not usable in this context either.

Is there a different method or workaround that would allow me to trigger the slide-over event in this context? 🙏
Solution
Actions aren’t livewire components so ‘$this’ is the action in this context. You can inject $livewire into the action callback and call $livewire->dispatch() etc.
Jump to solution
Was this page helpful?