Snapshot missing on Livewire component - Header Action

Hey guys. I made a view resource in my application where I have a view blade loaded into Section Component.

Section::make()->view('filament.user.resources.client-resource.widgets.client.header-session'...

Section::make()->view('filament.user.resources.client-resource.widgets.client.header-session'...

Inside view, I'm using a custom livewire component to show tags:

@if ($client->tags->count() > 0)
    <div class="flex gap-3">
       @foreach ($client->tags as $tag)
           <livewire:badge-tag-action :tag="$tag" :model="$client"/>
       @endforeach
     </div>
@endif

@if ($client->tags->count() > 0)
    <div class="flex gap-3">
       @foreach ($client->tags as $tag)
           <livewire:badge-tag-action :tag="$tag" :model="$client"/>
       @endforeach
     </div>
@endif

Everything is working well at this point, but for some reason, When I execute my Header Action, returns livewire error, IF i remove this custom view, It works fine, what i'm doing wrong? Action code:

Solution:

Added :wire:key="'badge-tag-' . $tag->id" /> and it works.

Jump to solution

2 Replies

leoblanski•5mo ago

protected function getHeaderActions(): array
    {
        return [
            ActionsAction::make('ManageTags')
            ->fillForm(function () {
                return $this->record->tags()->get()->toArray();
            })
            ->form(function () {
                return [
                    MultiSelect::make('tags')
                        ->relationship('tags', 'name')
                        ->createOptionForm(
                            [
                                TextInput::make('name'),
                                TextInput::make('description'),
                            ]
                        )
                        ->createOptionUsing(function(array $data) {
                            $tag = Tag::create([
                                'name' => $data['name'],
                                'description' => $data['description'],
                                'category' => 'client'
                            ]);

                            return $tag->id;
                        })
                        ->searchable()
                        ->options(
                            function () {
                                return Tag::query()->typeClient()->pluck('name', 'id');
                            }
                        )
                        ->preload(),
                ];
            })
        ];
    }

protected function getHeaderActions(): array
    {
        return [
            ActionsAction::make('ManageTags')
            ->fillForm(function () {
                return $this->record->tags()->get()->toArray();
            })
            ->form(function () {
                return [
                    MultiSelect::make('tags')
                        ->relationship('tags', 'name')
                        ->createOptionForm(
                            [
                                TextInput::make('name'),
                                TextInput::make('description'),
                            ]
                        )
                        ->createOptionUsing(function(array $data) {
                            $tag = Tag::create([
                                'name' => $data['name'],
                                'description' => $data['description'],
                                'category' => 'client'
                            ]);

                            return $tag->id;
                        })
                        ->searchable()
                        ->options(
                            function () {
                                return Tag::query()->typeClient()->pluck('name', 'id');
                            }
                        )
                        ->preload(),
                ];
            })
        ];
    }

Solution

leoblanski•5mo ago

Added :wire:key="'badge-tag-' . $tag->id" /> and it works.

Gaming

Programming

Snapshot missing on Livewire component - Header Action