FilamentF
Filament•2y ago
karikas

How to trigger a Livewire component update after saving an Edit form?

Hi, I've been struggling with this for some time now and could sure use a nudge in the right direction. I have a Filament edit form with a layout that includes a Livewire component, being included like this in the Form schema:

Group::make([
    Livewire::make(UserSidebar::class)
    ->id('user-sidebar'),
])

What I would like to have happen is that when the form is saved it dispatches a refresh request to that component to refresh its data, as it displays several fields found in the form. I've been able to get it to work with an afterStateUpdated() on every related field in the Form, like this:

TextInput::make('display_name')
    ->afterStateUpdated(function (Component $livewire, $state) {
        $livewire->dispatch('updateUserSidebar', ['display_name' => $state]);
    })

(note that is just updating one field due to some limitations I ran into trying to pass in the whole record)
...but I would much rather have one refresh defined in one place. I tried many, many variations in the UserEdit page php file, on the Action call itself and on the afterSave() event like this:

protected function afterSave(): void
{
    $this->fromView()->findComponent('user-sidebar')
        ->dispatchBrowserEvent('updateUserSidebar', $this->record);
}

which doesn't work, those methods don't exist, and I've tried several other variations. I haven't found how to tap into properly dispatching an event to Livewire from this point.

My question is, am I even thinking about this the right way? I would think the user sees their edit form with this sidebar component on the side. They edit a few fields, hit Save to have those changes take effect, and then the sidebar should update. I would expect Filament has a trigger to dispatch a refresh of the Livewire component with the entire updated record data when a save Action is triggered.

Any suggestions would be greatly appreciated, thank you!
Solution
Add in the livewire component

use Livewire\Attributes\On;

#[On('updateData')]
public function updateData(array $data): void
{
    //you can access $data from Form or $record..
}


Add in the EditPage
protected function afterSave(): void
{
    $this->dispatch('updateData', data: $this->data);
}
Jump to solution
Was this page helpful?