fix(VListItem): prevent navigation when disabled link is clicked

Author: mixelburg

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

@@ -233,6 +233,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
     } satisfies ListItemSlot))
 
     function onClick (e: MouseEvent) {
+      if (props.disabled) e.preventDefault()
       emit('click', e)
       if (['INPUT', 'TEXTAREA'].includes((e.target as Element)?.tagName)) return
 

packages/vuetify/src/components/VList/__tests__/VListItem.spec.browser.tsx

@@ -0,0 +1,26 @@
+// Components
+import { VList, VListItem } from '..'
+
+// Utilities
+import { render, screen, userEvent } from '@test'
+
+describe('VListItem', () => {
+  // https://github.com/vuetifyjs/vuetify/issues/22172
+  it('should not navigate when disabled item with href is clicked', async () => {
+    render(() => (
+      <VList>
+        <VListItem href="/about" disabled title="Link">
+          {{
+            append: () => <span class="append-content">append</span>,
+          }}
+        </VListItem>
+      </VList>
+    ))
+
+    const item = screen.getByCSS('.v-list-item')
+    const event = new MouseEvent('click', { bubbles: true, cancelable: true })
+    item.dispatchEvent(event)
+
+    expect(event.defaultPrevented).toBe(true)
+  })
+})