Issue with Table Actions Inside a Livewire Component in Filament v3

[jmendozaf]

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.

Repo : https://github.com/jmendozaf/filament-test-repo

In this repo, I have a Filament page in a Admin Panel 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?

[divdax]

I encountered the same problem where the modal only appeared on the second click, even though both the first and second clicks fired a livewire post request.

[jmendozaf]

Did you manage to find a solution or are you still stuck on it? Any clues or leads you've come across?

[leandrocfe]

There is also a pagination issue, but you can solve it using $table->queryStringIdentifier('products'). I've never tried this approach before, but I would recommend using tables on a separate page."

[jmendozaf]

I need to create a modal with a table so that I can search for products, contact or something and then select them to pass the ID to the parent

[leandrocfe]

Maybe you can use a bulk action to collect the ids and send it to the parent via livewire event.

[kayleegherrmann]

Have you had any luck with this. I am experiencing the same issue and am rather stumped.

I have a full page livewire component, inside that I have a livewire component that implements HasForm, HasTable.

In the table actions I have:

Action::make('Do Thing')
     ->form([
          TextInput::make('interesting_info')
      ])
      ->action(function (array $data): void {
              //stuff
    }
)

The "Do Thing" button requires to clicks to get the job done but ONLY after first page load.

On the first click I see a brief "Loading" indicater next to the action, the nothing.

For me, this only happens with actions that contain forms and are inside tables (Both custom forms and the 'requiresConfirmation'). Basically, anything that pop a modal. Non modal actions work as expected.

Edit: This also happens with Plan actions inside a livewire component not just in tables.

[arthurmarchesi]

Has anyone found a solution? I'm experiencing the same situation.

[divdax]

lazy load the component

[davidreyg]

@divdax Nice workaround! Hope they can fix it in next release :)

[iRajul]

@davidreyg I am using FilamentForm inside FilamentModel and facing same issue, can you elaborate which component to load lazily.

<x-filament::modal  id="edit-project">
        <x-slot name="heading">
            {{ $editingProject  ? 'Edit Project' : 'Create New Project' }}
        </x-slot>

        <form wire:submit.prevent="submit">
            {{ $this->form }}
            
            <x-filament::button type="submit" class="mt-4">
                {{ $editingProject  ? 'Update Project' : 'Create Project' }}
            </x-filament::button>
        </form>

        <x-slot name="footerActions">
            <x-filament::button wire:click="closeModal" color="secondary">
                Close
            </x-filament::button>
        </x-slot>
    </x-filament::modal>

[davidreyg]

@iRajul You just need to lazy load the table inside your Resource/Page/Livewire component as @divdax suggested.
You can find more in de official docs. here

[aeq-dev]

Same issue here, even if add ->deferLoading() to table :/