From 88d7998e040631a7c76eca360969f900c6fff201 Mon Sep 17 00:00:00 2001 From: Yuchao Wu Date: Fri, 21 Jun 2024 11:53:04 +1000 Subject: [PATCH] fix: disallow selecting via click anywhere in VListItem --- .../vuetify/src/components/VList/VListItem.tsx | 6 +----- .../vuetify/src/labs/VTreeview/VTreeviewItem.tsx | 16 ++++------------ 2 files changed, 5 insertions(+), 17 deletions(-) diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx index 5033f7954e1..072a06b8052 100644 --- a/packages/vuetify/src/components/VList/VListItem.tsx +++ b/packages/vuetify/src/components/VList/VListItem.tsx @@ -129,7 +129,7 @@ export const VListItem = genericComponent()({ const list = useList() const isActive = computed(() => props.active !== false && - (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)) + (props.active || link.isActive?.value || (root.activatable.value && isActivated.value)) ) const isLink = computed(() => props.link !== false && link.isLink.value) const isClickable = computed(() => @@ -182,10 +182,6 @@ export const VListItem = genericComponent()({ if (root.activatable.value) { activate(!isActivated.value, e) - } else if (root.selectable.value) { - select(!isSelected.value, e) - } else if (props.value != null) { - select(!isSelected.value, e) } } diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx index fea97419ddf..df490f0b072 100644 --- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx +++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx @@ -16,7 +16,7 @@ import { genOverlays } from '@/composables/variant' // Utilities import { computed, inject, ref } from 'vue' -import { genericComponent, propsFactory, useRender } from '@/util' +import { genericComponent, omit, propsFactory, useRender } from '@/util' // Types import { VTreeviewSymbol } from './shared' @@ -85,19 +85,12 @@ export const VTreeviewItem = genericComponent()({ } } - function onKeyDown (e: KeyboardEvent) { - if (e.key === 'Enter' || e.key === ' ') { - e.preventDefault() - activateItem(e) - } - } - const visibleIds = inject(VTreeviewSymbol, { visibleIds: ref() }).visibleIds useRender(() => { const hasTitle = (slots.title || props.title != null) const hasSubtitle = (slots.subtitle || props.subtitle != null) - const listItemProps = VListItem.filterProps(props) + const listItemProps = omit(VListItem.filterProps(props), ['onClick']) const hasPrepend = slots.prepend || props.toggleIcon return isActivatableGroupActivator.value @@ -116,7 +109,6 @@ export const VTreeviewItem = genericComponent()({ props.class, ]} onClick={ activateItem } - v-ripple={ isClickable.value && props.ripple } > <> { genOverlays(isActivated.value || isSelected.value, 'v-list-item') } @@ -173,9 +165,8 @@ export const VTreeviewItem = genericComponent()({ }, props.class, ]} + ripple={ false } value={ id.value } - onClick={ activateItem } - onKeydown={ isClickable.value && onKeyDown } > {{ ...slots, @@ -189,6 +180,7 @@ export const VTreeviewItem = genericComponent()({ icon={ props.toggleIcon } loading={ props.loading } variant="text" + onClick={ props.onClick } > {{ loader () {