Issue with Table Actions Inside a Livewire Component in Filament v3
I've come across a behavior in Filament v3 that seems odd to me, and I'm curious to see if anyone else has experienced it or has any insights.
Here's the backdrop:
I've set up a resource containing a form using Filament\Forms\Components\Tabs. Within these tabs, I've implemented the Filament\Forms\Components\ViewField to reference a specific view. This view then calls a Livewire component via @livewire('list-payments', compact('userId')). The ListPayments component in play here implements both HasForms and HasTable.
The anomaly arises with the table actions within this Livewire component. For some reason, these actions only activate upon the second click. The initial click appears to go unnoticed, as if it's not being registered or acknowledged.
To add to the mystery, this two-click behavior is not restricted to the ViewField alone. When I use this as a custom view for a modal, aiming to select a record and subsequently dispatch to an event listener (like #[On('user-selected')]), the same behavior persists – the action is only triggered on the second click.
Has anyone else faced a similar hiccup with table actions inside Livewire components in Filament? Any thoughts or guidance on this would be immensely valuable.
Solution:Jump to solution
if you're still wondering, i solved it by adding lazy="on-load" when calling the livewire in blade. Referred to this https://livewire.laravel.com/docs/lazy#rendering-placeholder-html
20 Replies
I asked about the "second click" issue some days ago too
https://discord.com/channels/883083792112300104/1150011343387230270
Can either of you provide a repro?
I don't see this behavior in any of my apps, so it must be something specific to your implementation. If you can provide a simple reproduction repo, I'll take a look.
locally it's fine for me it seem, but production then have issue
So it could be something that only happen when u have many more rows & resources interacting in a more complex manner
ok it happens on staging too (same dataset as local), but not locally
Staging site is ur usual forge deployed site
Production is forge + envoyer + opcache enabled
But since it happen on staging too i don't think it is related to opcache
So i think a simple repo won't trigger this issue. prob need a big admin with many resources & rows
It's only in staging and prod then have the issue. In v2 this issue didn't happen
just a plain livewire component with a table builder
i supposed your issue are resolved with the cloudflare setting right?
my issue is resolved by unchecking minifying html on cloudflare
mind sharing a repo? or can you check is your composer script included
filament:upgrade command? https://filamentphp.com/docs/3.x/tables/installation#upgradingtry add this or run
composer updatehttps://github.com/jmendozaf/filament-test-repo
Check this out. I have a Filament page that incorporates the Livewire component alongside the Table Builder. The table features a modal action with confirmation, operable with just a single click. Great, right? Additionally, I've set up a Filament resource for a product. This resource has a table action that triggers a modal content view. This particular view invokes the Livewire component via @livewire('livewire-list-products'). While the action on the resource table functions as expected, there's a hiccup once the modal opens. Specifically, if the custom view within the table component contains another action, I have to click twice for the action to be executed. Does that make sense?
GitHub
GitHub - jmendozaf/filament-test-repo
Contribute to jmendozaf/filament-test-repo development by creating an account on GitHub.
Your example works for me, but when I try the same code in my project I get the error stating that Product model is null. Not sure what I'm doing wrong.
Becuase you are calling Product... you need to define your own model
I defined my model, but whatever I do it's null. I'll try to make everything from scratch.
IF your model is null, yoiu are not loading in the record
If you are editing and creating, then you need to allow nullable too.
facing similar issue as well, rendered a livewire component (table) in an action modal, needed to click twice before anything is executed
Usually when you haven't run the mount functions?
Nothing?
i didn't override/use mount() function at all actually, just straight to render() & table() function.
i just noticed that if the 2nd click is on different row/action, it executes the former click
You need to declare mount and run $this->form->fill();
this is in livewire class? if so theres no change
Solution
if you're still wondering, i solved it by adding lazy="on-load" when calling the livewire in blade. Referred to this https://livewire.laravel.com/docs/lazy#rendering-placeholder-html