Confirmation modal for Bulk Action

[tuluong-vl]

Hi there
Is there anyway to create an Confirmation modal for the Bulk Action, for example i have Delete action? Sorry i'm new with Livewire

Thanks a lot

[maganius]

I think this functionality would be really useful. Is there any update on it?

[tuluong-vl]

@maganius

I did it by some small customizations
You have to overwrite the bulk-actions.blade.php view file:

Change wire:click.prevent="{{ $action }}" to wire:click.prevent="{{ $action == 'delete' ? 'confirmDelete' : $action }}"

And add this code block to your livewire table component class file:

protected $listeners = ['refreshDatatable' => '$refresh', 'confirm:delete' => 'delete'];
public function confirmDelete(){
        $this->emit("swal:confirm", [
            'method'      => 'confirm:delete',
            'params'      => '', // optional, send params to success confirmation
            'callback'    => '', // optional, fire event if no confirmed
        ]);
}

[lrljoe]

I'd recommend against using multiple emits to do this.

If you just want a confirmation pop-up, then the following will do that:

   onclick="return confirm('Your Question Here') || event.stopImmediatePropagation()" wire:click.prevent="{{ $action }}"

Please keep in mind that by publishing blades you'll potentially miss out on any future functionality/updates to that element, which may cause your component to break.
There's an upcoming tweak to how Bulk Actions work to swap over to an AlpineJS approach to improve paginated bulk action behaviour, so use caution here!
I'll look at adding in an option for a basic confirmation modal (as seen in my example above) as part of that.