© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•2y ago•
6 replies
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'),
])
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]);
    })
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);
}
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..
}
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);
}
protected function afterSave(): void
{
    $this->dispatch('updateData', data: $this->data);
}
Jump to solution
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

How to add only edit form to a livewire component.
FilamentFFilament / ❓┊help
3y ago
Component form and list on livewire update list when saving data
FilamentFFilament / ❓┊help
2y ago
How to trigger a livewire component on table action
FilamentFFilament / ❓┊help
3y ago
Adding a form to a Livewire component
FilamentFFilament / ❓┊help
12mo ago