Skip to content

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

Closed
mixelburg wants to merge 2 commits intovuetifyjs:masterfrom
mixelburg:fix/list-item-disabled-append-slot-navigation
Closed

fix(VListItem): prevent navigation when disabled link is clicked#22713
mixelburg wants to merge 2 commits intovuetifyjs:masterfrom
mixelburg:fix/list-item-disabled-append-slot-navigation

Conversation

@mixelburg
Copy link
Copy Markdown
Contributor

Fixes #22172

When a v-list-item has href or to (renders as <a>) and is disabled, clicking content inside a slot (e.g. a badge in the append slot) still causes the browser to follow the link.

The root cause: the onClick handler returns early when !isClickable.value (which covers the disabled case), but native anchor click behaviour fires independently of our handler — preventDefault() was never called.

Fix: call e.preventDefault() at the start of onClick when props.disabled is true. This is the same pattern used by other Vuetify components (e.g. VBtn) to block navigation on disabled link elements.

Added a browser test verifying that clicking a disabled list item with href does not navigate (event.defaultPrevented === true).

@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Mar 18, 2026

I can still focus the list item and click Enter to navigate

@J-Sek J-Sek added T: bug Functionality that does not work as intended/expected C: VListItem labels Mar 18, 2026
@mixelburg mixelburg closed this Apr 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

C: VListItem T: bug Functionality that does not work as intended/expected

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug Report][3.10.5] v-list-item navigates when disabled if click occurs on append slot content

2 participants