Filament•6d ago

Have to click action twice in component

Hi all, Strange one - I have a table with an action. The action opens up my livewire component, which just contains a table (for now). The table in the component then has it's own actions (attach) with requires confirmation set. The issue I have is that I have to click the attach action twice in order for the confirmation to appear. As you can see in the video, the loading icon spins and then it does nothing. If I click again, it works as it should. The first action looks like this:

Action::make('attach')
   ->label('Find')
   ->icon(Fa::getIcon('magnifying-glass-plus'))
   ->modalContent(fn(Model $record) => view('filament.components.attach-modal', ['record' => $record]))

Action::make('attach')
   ->label('Find')
   ->icon(Fa::getIcon('magnifying-glass-plus'))
   ->modalContent(fn(Model $record) => view('filament.components.attach-modal', ['record' => $record]))

This looks at my component view

@livewire('attach-modal', ['record' => $record])

@livewire('attach-modal', ['record' => $record])

Which loads my livewire component AttachModal where a table() method is used to generate the table with an action which is simply

Tables\Actions\Action::make('attach')
    ->button()
    ->action(function (Model $record, Action $action) {
        // Do something
    })
    ->requiresConfirmation()

Tables\Actions\Action::make('attach')
    ->button()
    ->action(function (Model $record, Action $action) {
        // Do something
    })
    ->requiresConfirmation()

and a render() method

return view('livewire.attach-modal');

return view('livewire.attach-modal');

I found I had to register the component in the AppServiceProvider too

Livewire::component('attach-modal', AttacModal::class);

Livewire::component('attach-modal', AttacModal::class);

I guess the 2 questions are: 1. Is this the correct way to add custom components to filament? 2. What's causing me having to click on the attach action twice for the confirmation to appear? Thanks!

Solution:

Try @livewire('attach-modal', ['record' => $record, 'lazy' => true])

Jump to solution

10 Replies

Adam Holmes•6d ago

Further testing shows that I just have to do "something" in the modal for the actions to then work. For example, if I load the modal, enter some text into the search, the attach action will then work first time

Solution

ChesterS•6d ago

Try @livewire('attach-modal', ['record' => $record, 'lazy' => true])

Adam Holmes•6d ago

That works! Is it because the table is loaded before the events are attached?

ChesterS•6d ago

Honestly, I have no fucking clue 😂 I've had the same issue you do and ran into a different question and saw the lazy => true thing But I don't know enough about livewire/filament to answer that

Adam Holmes•6d ago

Fair enough - if it works... Do you by any chance know how I might add a loading spinner so that it displays something before the lazy kicks in?

ChesterS•6d ago

No sorry 😦

Adam Holmes•6d ago

No worries 🙂 Cheers for your help - I won't mark it as resolved just yet in case one of the gurus can explain why lazy fixes it

ChesterS•6d ago

No worries. BTW there is an AttachAction you can use (just FYI)

Adam Holmes•6d ago

Coincidental naming - AttachAction doesn't suit the need for this

Adam Holmes•6d ago

https://livewire.laravel.com/docs/lazy#rendering-placeholder-html For reference - it's a simple as adding a placeholder method which is replaced when the render method is called 🙂

Laravel

Lazy Loading | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

Gaming

Programming

Have to click action twice in component