From 31dfc85e60644b701924e60bcb445d0191c82681 Mon Sep 17 00:00:00 2001
From: Brett Bailey <bretto36@gmail.com>
Date: Thu, 2 Apr 2026 16:00:19 +1000
Subject: [PATCH] Add interception on ModalLink for vue

---
 vue/src/ModalLink.vue | 101 ++++++++++++++++++++++++------------------
 1 file changed, 58 insertions(+), 43 deletions(-)

diff --git a/vue/src/ModalLink.vue b/vue/src/ModalLink.vue
index 56575372..8af9b18e 100644
--- a/vue/src/ModalLink.vue
+++ b/vue/src/ModalLink.vue
@@ -1,8 +1,9 @@
 <script setup>
-import { modalPropNames, useModalStack, prefetch as prefetchModal } from './modalStack'
-import { ref, provide, computed, watch, useAttrs, onBeforeUnmount, onMounted } from 'vue'
+import { modalPropNames, prefetch as prefetchModal, useModalStack } from './modalStack'
+import { computed, onBeforeUnmount, onMounted, provide, ref, useAttrs, watch } from 'vue'
 import { only, rejectNullValues } from './helpers'
 import { getConfig } from './config'
+import { shouldIntercept } from '@inertiajs/core'
 
 const props = defineProps({
     href: {
@@ -126,26 +127,35 @@ function doPrefetch() {
     })
 }
 
-function onMouseenter() {
-    if (!prefetchModes.value.includes('hover')) return
+function onMouseenter(event) {
+    if (shouldIntercept(event)) {
+        event.preventDefault()
+        if (!prefetchModes.value.includes('hover')) return
 
-    hoverTimeout.value = setTimeout(() => {
-        doPrefetch()
-    }, 75) // Small delay to avoid prefetching on accidental hovers
+        hoverTimeout.value = setTimeout(() => {
+            doPrefetch()
+        }, 75) // Small delay to avoid prefetching on accidental hovers
+    }
 }
 
-function onMouseleave() {
-    if (hoverTimeout.value) {
-        clearTimeout(hoverTimeout.value)
-        hoverTimeout.value = null
+function onMouseleave(event) {
+    if (shouldIntercept(event)) {
+        event.preventDefault()
+        if (hoverTimeout.value) {
+            clearTimeout(hoverTimeout.value)
+            hoverTimeout.value = null
+        }
     }
 }
 
 function onMousedown(event) {
-    if (!prefetchModes.value.includes('click')) return
-    if (event.button !== 0) return // Only left click
+    if (shouldIntercept(event)) {
+        event.preventDefault()
+        if (!prefetchModes.value.includes('click')) return
+        if (event.button !== 0) return // Only left click
 
-    doPrefetch()
+        doPrefetch()
+    }
 }
 
 onMounted(() => {
@@ -200,36 +210,41 @@ function onAfterLeave() {
     emit('after-leave')
 }
 
-function handle() {
-    if (loading.value) {
-        return
-    }
+function handle(event) {
+    // Ensure the click is a standard click
+    if (shouldIntercept(event)) {
+        event.preventDefault()
 
-    if (!props.href.startsWith('#')) {
-        loading.value = true
-        emit('start')
-    }
+        if (loading.value) {
+            return
+        }
 
-    modalStack
-        .visit(
-            props.href,
-            props.method,
-            props.data,
-            props.headers,
-            rejectNullValues(only(props, modalPropNames)),
-            onClose,
-            onAfterLeave,
-            props.queryStringArrayFormat,
-            shouldNavigate.value,
-        )
-        .then((context) => {
-            modalContext.value = context
-        })
-        .catch((error) => {
-            console.error(error)
-            emit('error', error)
-        })
-        .finally(() => (loading.value = false))
+        if (!props.href.startsWith('#')) {
+            loading.value = true
+            emit('start')
+        }
+
+        modalStack
+            .visit(
+                props.href,
+                props.method,
+                props.data,
+                props.headers,
+                rejectNullValues(only(props, modalPropNames)),
+                onClose,
+                onAfterLeave,
+                props.queryStringArrayFormat,
+                shouldNavigate.value,
+            )
+            .then((context) => {
+                modalContext.value = context
+            })
+            .catch((error) => {
+                console.error(error)
+                emit('error', error)
+            })
+            .finally(() => (loading.value = false))
+    }
 }
 </script>
 
@@ -238,7 +253,7 @@ function handle() {
         v-bind="$attrs"
         :is="as"
         :href="href"
-        @click.prevent="handle"
+        @click="handle"
         @mouseenter="onMouseenter"
         @mouseleave="onMouseleave"
         @mousedown="onMousedown"