fix(VTreeview): faster interactions with large trees (#22255)

Co-authored-by: Kael <[email protected]>
fixes #21720

Author: J-Sek

packages/api-generator/src/locale/en/VList.json

@@ -6,6 +6,7 @@
     "disabled": "Puts all children inputs into a disabled state.",
     "filterable": "**FOR INTERNAL USE ONLY** Prevents list item selection using [space] key and pass it back to the text input. Used internally for VAutocomplete and VCombobox.",
     "inactive": "If set, the list tile will not be rendered as a link even if it has to/href prop or @click handler.",
+    "itemsRegistration": "When set to 'props', skips rendering collapsed items/nodes (for significant performance gains).",
     "lines": "Designates a **minimum-height** for all children `v-list-item` components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.",
     "link": "Applies `v-list-item` hover styles. Useful when using the item is an _activator_.",
     "nav": "An alternative styling that reduces `v-list-item` width and rounds the corners. Typically used with **[v-navigation-drawer](/components/navigation-drawers)**.",

packages/docs/src/data/new-in.json

@@ -206,8 +206,9 @@
   },
   "VList": {
     "props": {
-      "prependGap": "3.11.0",
-      "indent": "3.11.0"
+      "indent": "3.11.0",
+      "itemsRegistration": "3.11.0",
+      "prependGap": "3.11.0"
     }
   },
   "VListItem": {
@@ -344,7 +345,8 @@
       "hideNoData": "3.10.0",
       "noDataText": "3.10.0",
       "separateRoots": "3.9.0",
-      "indentLines": "3.9.0"
+      "indentLines": "3.9.0",
+      "itemsRegistration": "3.11.0"
     },
     "slots": {
       "header": "3.10.0",

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

@@ -172,7 +172,8 @@ export const VList = genericComponent<new <
     const { dimensionStyles } = useDimension(props)
     const { elevationClasses } = useElevation(props)
     const { roundedClasses } = useRounded(props)
-    const { children, open, parents, select, getPath } = useNested(props)
+    const { children, open, parents, select, getPath } = useNested(props, items, () => props.returnObject)
+
     const lineClasses = toRef(() => props.lines ? `v-list--${props.lines}-line` : undefined)
     const activeColor = toRef(() => props.activeColor)
     const baseColor = toRef(() => props.baseColor)

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

@@ -6,13 +6,13 @@ import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 import { useList } from './list'
 import { makeComponentProps } from '@/composables/component'
 import { IconValue } from '@/composables/icons'
-import { useNestedGroupActivator, useNestedItem } from '@/composables/nested/nested'
+import { useNestedGroupActivator, useNestedItem, VNestedSymbol } from '@/composables/nested/nested'
 import { useSsrBoot } from '@/composables/ssrBoot'
 import { makeTagProps } from '@/composables/tag'
 import { MaybeTransition } from '@/composables/transition'
 
 // Utilities
-import { computed } from 'vue'
+import { computed, inject, toRef } from 'vue'
 import { defineComponent, genericComponent, propsFactory, useRender } from '@/util'
 
 export type VListGroupSlots = {
@@ -67,6 +67,9 @@ export const VListGroup = genericComponent<VListGroupSlots>()({
     const list = useList()
     const { isBooted } = useSsrBoot()
 
+    const parent = inject(VNestedSymbol)
+    const renderWhenClosed = toRef(() => parent?.root?.itemsRegistration.value === 'render')
+
     function onClick (e: Event) {
       if (['INPUT', 'TEXTAREA'].includes((e.target as Element)?.tagName)) return
       open(!isOpen.value, e)
@@ -114,9 +117,16 @@ export const VListGroup = genericComponent<VListGroupSlots>()({
         )}
 
         <MaybeTransition transition={{ component: VExpandTransition }} disabled={ !isBooted.value }>
-          <div class="v-list-group__items" role="group" aria-labelledby={ id.value } v-show={ isOpen.value }>
-            { slots.default?.() }
-          </div>
+          { renderWhenClosed.value
+            ? (
+            <div class="v-list-group__items" role="group" aria-labelledby={ id.value } v-show={ isOpen.value }>
+              { slots.default?.() }
+            </div>
+            ) : isOpen.value && (
+            <div class="v-list-group__items" role="group" aria-labelledby={ id.value }>
+              { slots.default?.() }
+            </div>
+            )}
         </MaybeTransition>
       </props.tag>
     ))

packages/vuetify/src/components/VTreeview/__tests__/VTreeview.spec.browser.tsx

@@ -60,9 +60,11 @@ const items = [
 ]
 
 describe.each([
-  ['plain', items],
-  ['reactive', reactive(items)],
-])('VTreeview with %s items', (_, items) => {
+  ['plain', 'render', items],
+  ['reactive', 'render', reactive(items)],
+  ['plain', 'props', items],
+  ['reactive', 'props', reactive(items)],
+] as const)('VTreeview with %s items and %s registration', (_, itemsRegistration, items) => {
   describe('activate', () => {
     it('single-leaf strategy', async () => {
       const activated = ref([])
@@ -74,6 +76,7 @@ describe.each([
           itemValue="id"
           activatable
           activeStrategy="single-leaf"
+          itemsRegistration={ itemsRegistration }
         />
       ))
 
@@ -96,6 +99,7 @@ describe.each([
           itemValue="id"
           activatable
           activeStrategy="leaf"
+          itemsRegistration={ itemsRegistration }
         />
       ))
 
@@ -118,6 +122,7 @@ describe.each([
           itemValue="id"
           activatable
           activeStrategy="independent"
+          itemsRegistration={ itemsRegistration }
         />
       ))
 
@@ -143,6 +148,7 @@ describe.each([
           itemValue="id"
           activatable
           activeStrategy="single-independent"
+          itemsRegistration={ itemsRegistration }
         />
       ))
 
@@ -169,6 +175,7 @@ describe.each([
           activatable
           activeStrategy="independent"
           onUpdate:activated={ onActivated }
+          itemsRegistration={ itemsRegistration }
         />
       ))
 
@@ -191,6 +198,7 @@ describe.each([
           itemValue="id"
           selectable
           selectStrategy="single-leaf"
+          itemsRegistration={ itemsRegistration }
         />
       ))
 
@@ -212,6 +220,7 @@ describe.each([
           itemValue="id"
           selectable
           selectStrategy="leaf"
+          itemsRegistration={ itemsRegistration }
         />
       ))
 
@@ -233,6 +242,7 @@ describe.each([
           itemValue="id"
           selectable
           selectStrategy="independent"
+          itemsRegistration={ itemsRegistration }
         />
       ))
 
@@ -257,6 +267,7 @@ describe.each([
           itemValue="id"
           selectable
           selectStrategy="single-independent"
+          itemsRegistration={ itemsRegistration }
         />
       ))
 
@@ -279,6 +290,7 @@ describe.each([
           itemValue="id"
           selectable
           selectStrategy="classic"
+          itemsRegistration={ itemsRegistration }
         />
       ))
 
@@ -301,13 +313,14 @@ describe.each([
             items={ items }
             itemValue="id"
             returnObject
+            itemsRegistration={ itemsRegistration }
           />
         ))
 
         await userEvent.click(screen.getByText(/Vuetify/).parentElement!.previousElementSibling!)
-        await expect.element(screen.getByText(/Core/)).toBeVisible()
+        await expect.element(screen.getByText(/Core/)).toBeDisplayed()
         await userEvent.click(screen.getByText(/Vuetify/).parentElement!.previousElementSibling!)
-        await expect.element(screen.getByText(/Core/)).not.toBeVisible()
+        await expect.poll(() => screen.queryByText(/Core/)).not.toBeDisplayed()
       })
 
       it('open-all should work', async () => {
@@ -317,6 +330,7 @@ describe.each([
             items={ items }
             itemValue="id"
             returnObject
+            itemsRegistration={ itemsRegistration }
           />
         ))
 
@@ -335,6 +349,7 @@ describe.each([
             items={ items }
             itemValue="id"
             returnObject
+            itemsRegistration={ itemsRegistration }
           />
         ))
 
@@ -389,6 +404,7 @@ describe.each([
             activatable
             activeStrategy="leaf"
             returnObject
+            itemsRegistration={ itemsRegistration }
           />
         ))
 
@@ -416,6 +432,7 @@ describe.each([
             activatable
             activeStrategy="independent"
             returnObject
+            itemsRegistration={ itemsRegistration }
           />
         ))
 
@@ -453,6 +470,7 @@ describe.each([
             activatable
             activeStrategy="single-independent"
             returnObject
+            itemsRegistration={ itemsRegistration }
           />
         ))
 
@@ -487,6 +505,7 @@ describe.each([
             returnObject
             selectable
             selectStrategy="single-leaf"
+            itemsRegistration={ itemsRegistration }
           />
         ))
 
@@ -513,6 +532,7 @@ describe.each([
             returnObject
             selectable
             selectStrategy="leaf"
+            itemsRegistration={ itemsRegistration }
           />
         ))
 
@@ -542,6 +562,7 @@ describe.each([
             returnObject
             selectable
             selectStrategy="independent"
+            itemsRegistration={ itemsRegistration }
           />
         ))
 
@@ -580,6 +601,7 @@ describe.each([
             returnObject
             selectable
             selectStrategy="single-independent"
+            itemsRegistration={ itemsRegistration }
           />
         ))
 
@@ -608,6 +630,7 @@ describe.each([
             selectable
             returnObject
             selectStrategy="classic"
+            itemsRegistration={ itemsRegistration }
           />
         ))
 
@@ -645,6 +668,7 @@ describe.each([
             itemValue="id"
             openAll
             returnObject
+            itemsRegistration={ itemsRegistration }
           />
         ))
 
@@ -667,6 +691,7 @@ describe.each([
         openAll
         items={ items }
         itemValue="id"
+        itemsRegistration={ itemsRegistration }
       />
     ))
 
@@ -685,17 +710,17 @@ describe.each([
         itemValue="id"
         openOnClick
         returnObject
+        itemsRegistration={ itemsRegistration }
       >
         {{
           prepend: ({ isOpen }) => (<span class="prepend-is-open">{ `${isOpen}` }</span>),
         }}
       </VTreeview>
     ))
 
-    const itemsPrepend = screen.getAllByCSS('.v-treeview-item .v-list-item__prepend .prepend-is-open')
-
     await userEvent.click(screen.getByText(/Vuetify Human Resources/))
     await waitIdle()
+    const itemsPrepend = screen.getAllByCSS('.v-treeview-item .v-list-item__prepend .prepend-is-open')
     expect(itemsPrepend[0]).toHaveTextContent(/^true$/)
     expect(itemsPrepend[1]).toHaveTextContent(/^false$/)
 
@@ -712,7 +737,6 @@ describe.each([
     await userEvent.click(screen.getByText(/Vuetify Human Resources/))
     await waitIdle()
     expect(itemsPrepend[0]).toHaveTextContent(/^false$/)
-    expect(itemsPrepend[1]).toHaveTextContent(/^false$/)
   })
 })