From fe72e6d10750aaf5ecd62997c575c3a5450a8363 Mon Sep 17 00:00:00 2001 From: Yuchao Wu Date: Fri, 7 Jun 2024 23:13:27 +1000 Subject: [PATCH 1/3] fix(VTreeview): prevent treeview re-render during open --- packages/vuetify/src/components/VList/VList.tsx | 1 + packages/vuetify/src/labs/VTreeview/VTreeview.tsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx index 00e020b2a94..fd1d33d9f38 100644 --- a/packages/vuetify/src/components/VList/VList.tsx +++ b/packages/vuetify/src/components/VList/VList.tsx @@ -97,6 +97,7 @@ export const makeVListProps = propsFactory({ 'onClick:open': EventProp<[{ id: unknown, value: boolean, path: unknown[] }]>(), 'onClick:select': EventProp<[{ id: unknown, value: boolean, path: unknown[] }]>(), + 'onUpdate:opened': EventProp<[]>(), ...makeNestedProps({ selectStrategy: 'single-leaf' as const, openStrategy: 'list' as const, diff --git a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx index daaa14820f2..74fb3f5a50e 100644 --- a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx +++ b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx @@ -146,7 +146,14 @@ export const VTreeview = genericComponent( }) useRender(() => { - const listProps = VList.filterProps(props) + const { opened: _, ...listPropsRaw } = VList.filterProps(props) + const listProps = props.opened == null + ? listPropsRaw + : { + ...listPropsRaw, + opened: props.opened, + } + const treeviewChildrenProps = VTreeviewChildren.filterProps(props) return ( @@ -158,7 +165,6 @@ export const VTreeview = genericComponent( props.class, ]} style={ props.style } - v-model:opened={ opened.value } v-model:activated={ activated.value } v-model:selected={ selected.value } > From ca1e9d98eb532bca5a20f0cd66ff40712eb3861c Mon Sep 17 00:00:00 2001 From: Yuchao Wu Date: Sun, 9 Jun 2024 10:05:29 +1000 Subject: [PATCH 2/3] chore: refactor --- packages/vuetify/src/labs/VTreeview/VTreeview.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx index 74fb3f5a50e..09a88686bcf 100644 --- a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx +++ b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx @@ -9,7 +9,7 @@ import { useProxiedModel } from '@/composables/proxiedModel' // Utilities import { computed, provide, ref, toRef, watch } from 'vue' -import { genericComponent, omit, propsFactory, useRender } from '@/util' +import { genericComponent, getCurrentInstance, omit, propsFactory, useRender } from '@/util' // Types import { VTreeviewSymbol } from './shared' @@ -59,6 +59,7 @@ export const VTreeview = genericComponent( }, setup (props, { slots }) { + const vm = getCurrentInstance('VTreeview') const { items } = useListItems(props) const activeColor = toRef(props, 'activeColor') const baseColor = toRef(props, 'baseColor') @@ -146,13 +147,7 @@ export const VTreeview = genericComponent( }) useRender(() => { - const { opened: _, ...listPropsRaw } = VList.filterProps(props) - const listProps = props.opened == null - ? listPropsRaw - : { - ...listPropsRaw, - opened: props.opened, - } + const listProps = VList.filterProps(vm.vnode.props!) const treeviewChildrenProps = VTreeviewChildren.filterProps(props) From f1d1bd1ab3612d021261773fcc480e524d6b94b5 Mon Sep 17 00:00:00 2001 From: Yuchao Wu Date: Sun, 9 Jun 2024 10:35:14 +1000 Subject: [PATCH 3/3] fix: build error --- packages/vuetify/src/labs/VTreeview/VTreeview.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx index 09a88686bcf..7778c69df26 100644 --- a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx +++ b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx @@ -12,6 +12,7 @@ import { computed, provide, ref, toRef, watch } from 'vue' import { genericComponent, getCurrentInstance, omit, propsFactory, useRender } from '@/util' // Types +import type { ExtractPublicPropTypes } from 'vue' import { VTreeviewSymbol } from './shared' import type { VListChildrenSlots } from '@/components/VList/VListChildren' import type { ListItem } from '@/composables/list-items' @@ -147,7 +148,7 @@ export const VTreeview = genericComponent( }) useRender(() => { - const listProps = VList.filterProps(vm.vnode.props!) + const listProps = VList.filterProps(vm.vnode.props! as ExtractPublicPropTypes) const treeviewChildrenProps = VTreeviewChildren.filterProps(props)