Filament•2mo ago

Upgrading to Filament >= 3.2.138 causes black screen/modal overlay bug.

Researching a bit, it appears to be tied to https://github.com/filamentphp/filament/pull/15559 but I am surprised no one else is having the same issue? After updating the version I am running php artisan filament:upgrade and also php artisan filament:optimize , have also tried clearing browser cache and I still get this behavior. For me it's on all versions >= 3.2.138. Downgrading to 3.2.137 instantly fixes it. The bug itself seems to match up with what is described here; https://github.com/filamentphp/filament/issues/15017 the tables load fine, but any action on the table e.g. changing the rows or using a filter seems to cause the black modal overlay to appear. I have no console errors. Any ideas? The github links imply that this issue is resolved so I am wondering if I am missing something here. Thanks in advance

GitHub

Unlock Livewire version by danharrin · Pull Request #15559 · filame...

From #15062: The Async Alpine (v1) version was locked a while ago due to issues released in a minor version. We cannot receive updates to this package. 2 weeks ago we locked Livewire in v3.2.125 a...

GitHub

Dark overlay appears when clicked on modals · Issue #15017 · filame...

Package filament/filament Package Version v3.2.57 Laravel Version v11.34 Livewire Version No response PHP Version 8.2 Problem description I have an action button with forms and when clicked it show...

10 Replies

CTOP•2mo ago

For anyone finding this in the future, the root cause of this was an overriden blade template. In my case it was vendor/filament-tables/index.php . Checking the changelog manually the part which had to be fixed was this (previously):

<div
    @if (! $isLoaded)
        wire:init="loadTable"
    @endif
    x-ignore
    @if (FilamentView::hasSpaMode())
        ax-load="visible"
    @else
        ax-load
    @endif
    ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('table', 'filament/tables') }}"
    x-data="table"
    @class([
        'fi-ta',
        'animate-pulse' => $records === null,
    ])
>

<div
    @if (! $isLoaded)
        wire:init="loadTable"
    @endif
    x-ignore
    @if (FilamentView::hasSpaMode())
        ax-load="visible"
    @else
        ax-load
    @endif
    ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('table', 'filament/tables') }}"
    x-data="table"
    @class([
        'fi-ta',
        'animate-pulse' => $records === null,
    ])
>

changed to this:

<div
    @if (! $isLoaded)
        wire:init="loadTable"
    @endif

    @if (FilamentView::hasSpaMode())
        x-load="visible"
    @else
        x-load
    @endif
    x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('table', 'filament/tables') }}"
    x-data="table"
    @class([
        'fi-ta',
        'animate-pulse' => $records === null,
    ])
>

<div
    @if (! $isLoaded)
        wire:init="loadTable"
    @endif

    @if (FilamentView::hasSpaMode())
        x-load="visible"
    @else
        x-load
    @endif
    x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('table', 'filament/tables') }}"
    x-data="table"
    @class([
        'fi-ta',
        'animate-pulse' => $records === null,
    ])
>

So the changes needed are changing ax-load to x-load but also you have to remove the x-ignore

toeknee•2mo ago

This is exactly why we don't recommend overriding any views and strongly advise against it, for any that you do override your should have a diff compare against the original so you can monitor the changes.

Steff•4w ago

I have the same issue. The downgrade to "livewire/livewire": "3.5.12" helped me. I dont have a path with filament-table. But i should not override this, right? There is no solution > "livewire "3.5.12", right?

toeknee•4w ago

Have you overriden any views? If filament locked it won't let you upgrade.

Steff•4w ago

Not really. but i'm not sure. can i check whether filament is locked?

toeknee•4w ago

resources/vendor/ /

Steff•4w ago

something like this?

toeknee•4w ago

Yeah should be ok as you don't have filament resources loaded

Steff•4w ago

Ok, thanks. What else can I do?

toeknee•4w ago

upgrade and clear all caches, and run npm run build and ensure theres not browser / server side caching.

Gaming

Programming

Upgrading to Filament >= 3.2.138 causes black screen/modal overlay bug.

Did you find this page helpful?