[Bug?] Javascript confirm dialog cancel not working

[adevade]

<form action="/documents/1" 
    method="POST"
    x-data
    onclick="return confirm('Move to trash?')"
    x-on:click="return confirm('Move to trash?')"
>
    <button type="submit">Delete</button>
</form>

The OG onclick="" is working as expected. OK continues the request, and cancel aborts the request.

The Alpine version however always continues the request, on both OK and cancel.

Might be me doing something wrong, but I can't seem to get it working. Any ideas?

[SimoTod]

That way of stopping an event is typical of vanilla JS but the documentation doesn't mention it so I wouldn't expect it to work.

The Alpine way for something like that would be:

• stop the event using a modifier
• submit the form when you get confirmation

<form action="/documents/1" method="POST" x-data x-ref="form">
    <button x-on:click.prevent="if (confirm('Move to trash?')) $refs.form.submit()" type="submit">Delete</button>
</form>

From the documentation:
x-on attaches an event listener to the element it's declared on. When that event is emitted, the JavaScript expression set as its value is executed.

[adevade]

Hmm, okay! Thank you for the answer!

I think I'll keep the native onclick behaviour for now, since it's shorter and simpler. And I don't need that component for anything else in Alpine.

Leaving this open until @calebporzio has seen it. Feel free to close if not doable, but it would be slick to have in Alpine, no? 😉

How about @click.confirm="Are you sure?"?

[calebporzio]

Yeah, I actually think mimicking normal return behavior in an onclick is handy.

It kinda goes with the ethos that Alpine should feel very native-eventy.

I'd be down for this and I *think it'd be a pretty simple implementation on this line: src/directives/on.js:37

[adevade]

I'm re-using this issue to shine light on a discussion I opened today: #2782

It doesn't seem to be working the way it should with regular <a> links. More info in the discussion.