fix(VListItem): only attach onClick when item is clickable

packages/docs/src/examples/v-alert/prop-duration.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <v-btn
+      v-if="!visible"
+      @click="visible = true"
+    >
+      Show alert
+    </v-btn>
+
+    <v-alert
+      v-else
+      v-model="visible"
+      :duration="3000"
+      text="This alert will automatically dismiss after 3 seconds."
+      type="info"
+      closable
+    ></v-alert>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const visible = ref(true)
+</script>

packages/docs/src/pages/en/components/alerts.md

@@ -131,6 +131,12 @@ The **closable** prop adds a [v-icon](/components/icons) on the far right, after
 
 <ExamplesExample file="v-alert/prop-closable" />
 
+#### Duration
+
+The **duration** prop causes the alert to automatically dismiss itself after the specified number of milliseconds. Set to `-1` (the default) to disable auto-dismiss. Combine with **closable** to give users both auto-dismiss and manual control.
+
+<ExamplesExample file="v-alert/prop-duration" />
+
 The close icon automatically applies a default `aria-label` and is configurable by using the **close-label** prop or changing **close** value in your locale.
 
 ::: info

packages/vuetify/src/components/VAlert/VAlert.tsx

@@ -25,7 +25,7 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'
 
 // Utilities
-import { toRef } from 'vue'
+import { onMounted, onScopeDispose, toRef, watch } from 'vue'
 import { genericComponent, propsFactory } from '@/util'
 
 // Types
@@ -57,6 +57,10 @@ export const makeVAlertProps = propsFactory({
     type: String,
     default: '$vuetify.close',
   },
+  duration: {
+    type: [Number, String],
+    default: -1,
+  },
   icon: {
     type: [Boolean, String, Function, Object] as PropType<false | IconValue>,
     default: null,
@@ -107,6 +111,28 @@ export const VAlert = genericComponent<VAlertSlots>()({
 
   setup (props, { emit, slots }) {
     const isActive = useProxiedModel(props, 'modelValue')
+
+    let dismissTimer = -1
+    function clearDismissTimer () {
+      if (dismissTimer !== -1) {
+        window.clearTimeout(dismissTimer)
+        dismissTimer = -1
+      }
+    }
+    function scheduleDismiss () {
+      clearDismissTimer()
+      const ms = Number(props.duration)
+      if (ms > 0 && isActive.value) {
+        dismissTimer = window.setTimeout(() => {
+          isActive.value = false
+          dismissTimer = -1
+        }, ms)
+      }
+    }
+    onMounted(scheduleDismiss)
+    watch(() => [props.duration, isActive.value], scheduleDismiss)
+    onScopeDispose(clearDismissTimer)
+
     const icon = toRef(() => {
       if (props.icon === false) return undefined
       if (!props.type) return props.icon

packages/vuetify/src/components/VList/VListItem.tsx

@@ -263,6 +263,8 @@ export const VListItem = genericComponent<VListItemSlots>()({
       }
     }
 
+    const clickHandler = computed(() => (isClickable.value || attrs.onClick) ? onClick : undefined)
+
     useRender(() => {
       const Tag = isLink.value ? 'a' : props.tag
       const hasTitle = (slots.title || props.title != null)
@@ -317,7 +319,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
           tabindex={ props.tabindex ?? (isClickable.value ? (list ? -2 : 0) : undefined) }
           aria-selected={ ariaSelected.value }
           role={ role.value }
-          onClick={ onClick }
+          onClick={ clickHandler.value }
           onKeydown={ isClickable.value && !isLink.value && onKeyDown }
           v-ripple={ isClickable.value && rippleOptions.value }
         >