fix(VBtn, VChip): correct link active state after navigation cancellation (#21651)

fixes #21594

Author: babu-ch

packages/vuetify/src/components/VBtn/VBtn.tsx

@@ -153,7 +153,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
         : props.value
     })
 
-    function onClick (e: MouseEvent) {
+    async function onClick (e: MouseEvent) {
       if (
         isDisabled.value ||
         (link.isLink.value && (
@@ -165,8 +165,9 @@ export const VBtn = genericComponent<VBtnSlots>()({
         ))
       ) return
 
-      link.navigate?.(e)
-      group?.toggle()
+      if (await (link.navigateWithCheck?.(e) ?? true)) {
+        group?.toggle()
+      }
     }
 
     useSelectLink(link, group?.select)

packages/vuetify/src/components/VChip/VChip.tsx

@@ -162,13 +162,14 @@ export const VChip = genericComponent<VChipSlots>()({
       })
     })
 
-    function onClick (e: MouseEvent) {
+    async function onClick (e: MouseEvent) {
       emit('click', e)
 
       if (!isClickable.value) return
 
-      link.navigate?.(e)
-      group?.toggle()
+      if (await (link.navigateWithCheck?.(e) ?? true)) {
+        group?.toggle()
+      }
     }
 
     function onKeyDown (e: KeyboardEvent) {

packages/vuetify/src/composables/router.tsx

@@ -6,6 +6,7 @@ import {
   resolveDynamicComponent,
   toRef,
 } from 'vue'
+import { isNavigationFailure } from 'vue-router'
 import { deepEqual, getCurrentInstance, hasEvent, IN_BROWSER, propsFactory } from '@/util'
 
 // Types
@@ -47,6 +48,7 @@ export interface UseLink extends Omit<Partial<ReturnType<typeof _useLink>>, 'hre
   isClickable: Readonly<Ref<boolean>>
   href: Ref<string | undefined>
   linkProps: Record<string, string | undefined>
+  navigateWithCheck?: (e: MouseEvent | undefined) => Promise<boolean>
 }
 
 export function useLink (props: LinkProps & LinkListeners, attrs: SetupContext['attrs']): UseLink {
@@ -84,12 +86,18 @@ export function useLink (props: LinkProps & LinkListeners, attrs: SetupContext['
   })
   const href = computed(() => props.to ? link.value?.route.value.href : props.href)
 
+  async function navigateWithCheck (e: MouseEvent | undefined) {
+    const result = await link.value?.navigate(e)
+    return !isNavigationFailure(result)
+  }
+
   return {
     isLink,
     isClickable,
     isActive,
     route: link.value?.route,
     navigate: link.value?.navigate,
+    navigateWithCheck,
     href,
     linkProps: reactive({
       href,