Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
BradnDodd opened this issue Feb 26, 2025 · 0 comments
Labels
Milestone

Comments

@BradnDodd
Copy link

BradnDodd commented Feb 26, 2025

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
@github-project-automation github-project-automation bot moved this to Todo in Roadmap Feb 26, 2025
@danharrin danharrin added this to the v3 milestone Mar 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Todo
Development

No branches or pull requests

2 participants