filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
18.92k stars 2.93k forks source link

requiresConfirmation on table action ends in overlay and errors #919

Closed bernhardh closed 2 years ago

bernhardh commented 2 years ago

Package

filament/tables

Package Version

v2.5.31

Laravel Version

v8.76.2

Livewire Version

v2.8.2

PHP Version

8.0.13

Bug description

I am using the table and forms package outside of filament admin! I created a simple table component, added a delete ButtonAction and want to get confirmation before deletion (requiresConfirmation). When the user clicks on confirm in the modal, the record is delete, but I get JS errors and a overlay stays. See screencast

https://user-images.githubusercontent.com/642292/146615552-62b01029-48ae-4d6c-bd5f-ae48085843cf.mp4

Without requiresConfirmation, everything works fine:

https://user-images.githubusercontent.com/642292/146615624-082bcc1a-3474-4bb4-9242-052e130a0056.mp4

Steps to reproduce

I have the following simplified Table Component:

class UsersTable extends Component implements Tables\Contracts\HasTable
{
    use Tables\Concerns\InteractsWithTable;

    protected function getTableQuery(): Builder
    {
        return User::query();
    }

    protected function getTableColumns(): array
    {
        return [
            Tables\Columns\TextColumn::make("name")->sortable()->searchable(),
        ];
    }

    protected function getTableActions(): array
    {
        return [
            ButtonAction::make('delete')
                ->label('Löschen')
                ->color("danger")
                ->icon('heroicon-o-trash')
                ->action(fn ($record) => $record->delete())
                ->requiresConfirmation(),
        ];
    }

    public function render()
    {
        return view('livewire.users.users-table');
    }
}

And this is the blade view:

<div>
    {{ $this->table }}
</div>

Relevant log output

No response

danharrin commented 2 years ago

Apologies, can't replicate this at all - copied your exact code. Please send me a GitHub repo where I can explore the context behind this bug more :)

bernhardh commented 2 years ago

Thanks for your efford!

I retried it just now, and it worked. Maybe there was a bug in another package and that got fixed in a current update.