Skip to content

Section header with blade & query - Uncaught Snapshot missing on Livewire component with id #15722

Open
@BradnDodd

Description

@BradnDodd

Package

filament/filament

Package Version

3.2.140

Laravel Version

11.42.1

Livewire Version

3.5.20

PHP Version

8.3.10

Problem description

When having a Section heading that uses a blade render/ htmlstring that relies on a query causes a livewire JS error;
Uncaught Snapshot missing on Livewire component with id:

Section::make(
                new HtmlString(
                    Blade::render(
                        <<<'BLADE'
                        <div class="flex items-centre gap-x-2">
                        <span>Pinned Comments</span>
                        <x-filament::badge color="success" size="xs">
                                {{ $numComments }}
                        </x-filament::badge>
                        </div>
                        BLADE, ['numComments' => $post->pinnedComments()->count() ?: 0]
                    )
                )
            )
                ->schema([
                    Livewire::make(ListPinnedComments::class, fn ($record) => ['post' => $record])
                        ->key('PinnedCommentsComponent'),
                ])
                ->collapsible(true)
                ->collapsed(true),

If I swap out the numComments for a simple variable then I no longer get the error.

Expected behavior

The heading should update when the relation has been updated and it shouldn't cause the page to die when that update happens

Steps to reproduce

  1. Goto the homepage, click New Post, add a title and click Create
  2. Click the view action of the created table record
  3. Click New Comment, enter a comment and click Create
  4. Click Edit post, uncollapse the Pinned Comments section, select all rows and click Pin comments, click Save

You should now see the console error and the Edit post action will no longer work. Tested on firefox 135.0.1

Reproduction repository (issue will be closed if this is not valid)

https://github.com/BradnDodd/filament-bug

Relevant log output

Uncaught Snapshot missing on Livewire component with id: Fy7AJCNtGYxfhBsugICi
Uncaught (in promise) TypeError: Element.animate: Duration (nan) must be nonnegative

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    Status

    Todo

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions