Livewire: Confirm modifier / modal

[austenc]

Is your feature request related to a problem? Please describe.
Although it's not the prettiest dialog, the vanilla javascript confirm() function can be a simple and useful method of confirming dangerous actions. Surely the confirm modal could be built as its own livewire component and used, but it might be nice if livewire provided a modifier that gave users an easy way to confirm something.

I tried something like this:

<button onclick="confirm('Are you sure?')" wire:click="removeItem({{ $product->id }})">

Although the confirm dialog does open _first_, the wire:click runs next regardless of whether you click "Cancel" or "OK". This is what I'd expect to happen given how Livewire works...

Describe the solution you'd like
What if we were to provide a modifier on the click (or other actions?) that allowed users to spawn a js confirm dialog?

<button wire:click.confirm="'Are you sure?', removeItem({{ $product->id }})">
Perhaps there's a nicer way to format or pass in those params too. Maybe the dialog has some default text and the message becomes an optional second param? Totally open to other ideas as well!

Describe alternatives you've considered

• A livewire confirm dialog that's built in to the framework
• Rolling your own confirm dialog
• Not confirming actions... _I like to live dangerously_

[calebporzio]

Interesting. I could see the use case for this for sure.

I don't think I want Livewire to have any visual opinions (I could see the confirm/alert browser UI being an exception, but still)

Here's actually a way you could accomplish that same thing:

[austenc]

I think that workaround is perfectly fine. I knew there had to be a way, but I didn't think to stop the propagation of the event! nice!

[calebporzio]

Yeah, "stopPropagation" won't work on the same element, that's why we had to reach for "stopImmediatePropogation"