Click event on Link component does not fire when I expect it to

[martinbean]

Versions:

• @inertiajs/core version: 1.2.0
• @inertiajs/vue3 version: 1.2.0

Describe the problem:

The click event on a <Link> component does not fire when I expect it to. It seems to fire after before and start events. I’d expect the click event to be fired before these, as me clicking the link happens before any HTTP request is initiated (without Inertia being clairvoyant).

I was hoping to be able to use the click event to then stop propagation, i.e. for links where I want to open a modal instead of make a page visit. I was hoping to use the click event because I’m already defining a before callback in my custom component that wraps Inertia’s <Link> component:

<!-- ActionButton.vue -->
<script setup>
const props = defineProps({
  confirmationText: {
    required: false,
    type: String,
  },
  href: {
    required: true,
    type: String,
  },
});

const confirm = () => props.confirmationText ? window.confirm(props.confirmationText) : true;
</script>

<template>
  <Link v-bind:href="href" v-on:before="confirm">
    <slot></slot>
  </Link>
</template>

I was hoping, from a parent component, I could add a click handler that prevents the event:

<ActionButton v-on:click.prevent="openModal">Open modal</ActionModal>

But this is not possible given how late the click event is called by Inertia. It’s also fired after the start event, and the Inertia docs says the start event is not cancellable. So it’s just far too late in the lifecycle any way.

Steps to reproduce:

I’ve observed this behaviour by adding a <Link> component to a test app and adding event listeners to all events:

<InertiaLink
    href="#"
    v-on:before="console.log('Before')"
    v-on:start="console.log('Start')"
    v-on:progress="console.log('Progress')"
    v-on:success="console.log('Success')"
    v-on:error="console.log('Error')"
    v-on:cancel="console.log('Cancel')"
    v-on:finish="console.log('Finish')"
    v-on:click="console.log('Click')"
>
    Test link
</InertiaLink>

The following is logged in the console:

Before
Start
Click
Success
Finish