From e9c69cc3d77cb1fdb7001a772c4bc3032eae3a0b Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Wed, 10 Jul 2024 01:48:30 +1000
Subject: [PATCH] feat(VTreeview): port open-on-click prop to v3 & enhancement
 (#20038)

fixes #20009
fixes #20095
fixes #19414
fixes #20106
---
 .../src/locale/en/VTreeview.json              |   2 +-
 .../v-treeview/misc-search-and-filter.vue     |   4 +-
 .../v-treeview/misc-selectable-icons.vue      | 108 +---
 .../examples/v-treeview/prop-activatable.vue  |   1 +
 .../src/examples/v-treeview/prop-color.vue    |   1 +
 .../v-treeview/prop-selection-type.vue        |  10 +-
 .../v-treeview/slot-append-and-label.vue      |  79 +--
 .../docs/src/pages/en/components/treeview.md  |   4 +-
 .../src/components/VList/VListItem.sass       |   2 +-
 .../src/components/VList/VListItem.tsx        |   5 +-
 .../vuetify/src/composables/nested/nested.ts  |   6 +-
 .../src/composables/nested/openStrategies.ts  |   7 +-
 .../composables/nested/selectStrategies.ts    |  10 +-
 .../vuetify/src/labs/VTreeview/VTreeview.tsx  |  15 +-
 .../src/labs/VTreeview/VTreeviewChildren.tsx  |  31 +-
 .../src/labs/VTreeview/VTreeviewItem.tsx      | 109 +---
 .../VTreeview/__tests__/VTreeview.spec.cy.tsx | 582 +++++++++++++++++-
 17 files changed, 667 insertions(+), 309 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VTreeview.json b/packages/api-generator/src/locale/en/VTreeview.json
index 3025b82f42b3..0d1efb4f3500 100644
--- a/packages/api-generator/src/locale/en/VTreeview.json
+++ b/packages/api-generator/src/locale/en/VTreeview.json
@@ -25,7 +25,7 @@
     "returnObject": "When `true` will make `v-model`, `active.sync` and `open.sync` return the complete object instead of just the key.",
     "rounded": "Provides an alternative active style for `v-treeview` node. Only visible when `activatable` is `true` and should not be used in conjunction with the `shaped` prop.",
     "search": "The search model for filtering results.",
-    "selectable": "Will render a checkbox next to each node allowing them to be selected.",
+    "selectable": "Will render a checkbox next to each node allowing them to be selected. Additionally, the **[openOnClick](/api/v-treeview/#props-open-on-click)** property will be applied internally.",
     "selectedColor": "The color of the selection checkbox.",
     "selectionType": "Controls how the treeview selects nodes. There are two modes available: 'leaf' and 'independent'.",
     "shaped": "Provides an alternative active style for `v-treeview` node. Only visible when `activatable` is `true` and should not be used in conjunction with the `rounded` prop.",
diff --git a/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue b/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
index 7333aefc0cfd..3e5c3e339bef 100644
--- a/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
+++ b/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
@@ -23,10 +23,12 @@
     </v-sheet>
     <v-card-text>
       <v-treeview
-        v-model:open="open"
+        v-model:opened="open"
         :filter="filter"
         :items="items"
         :search="search"
+        item-value="id"
+        open-all
       >
         <template v-slot:prepend="{ item }">
           <v-icon
diff --git a/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue b/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue
index 0cf3925f03be..4243d9052b82 100644
--- a/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue
+++ b/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue
@@ -18,14 +18,12 @@
             v-model:selected="tree"
             :items="items"
             :load-children="load"
-            expand-icon="mdi-chevron-down"
+            false-icon="mdi-bookmark-outline"
             indeterminate-icon="mdi-bookmark-minus"
             item-title="name"
-            item-value="name"
-            off-icon="mdi-bookmark-outline"
-            on-icon="mdi-bookmark"
-            selected-color="indigo"
-            open-on-click
+            item-value="id"
+            select-strategy="classic"
+            true-icon="mdi-bookmark"
             return-object
             selectable
           ></v-treeview>
@@ -54,7 +52,7 @@
             <v-chip
               v-for="(selection, i) in tree"
               :key="i"
-              :text="selection"
+              :text="selection.name"
               class="ma-1"
               color="grey"
               prepend-icon="mdi-beer"
@@ -87,23 +85,16 @@
 </template>
 
 <script setup>
-  import { computed, ref, watch } from 'vue'
+  import { ref, watch } from 'vue'
 
   const breweries = ref([])
   const tree = ref([])
   const types = ref([])
-  const items = computed(() => {
-    const children = types.value.map(type => ({
-      id: type,
-      name: getName(type),
-      children: getChildren(type),
-    }))
-    return [{
-      id: 1,
-      name: 'All Breweries',
-      children,
-    }]
-  })
+  const items = ref([{
+    id: 1,
+    name: 'All Breweries',
+    children: [],
+  }])
   function load () {
     if (breweries.value.length) return
 
@@ -131,73 +122,14 @@
       if (!acc.includes(type)) acc.push(type)
       return acc
     }, []).sort()
-  })
-</script>
-
-<script>
-  export default {
-    data: () => ({
-      breweries: [],
-      tree: [],
-      types: [],
-    }),
-
-    computed: {
-      items () {
-        const children = this.types.map(type => ({
-          id: type,
-          name: this.getName(type),
-          children: this.getChildren(type),
-        }))
-
-        return [{
-          id: 1,
-          name: 'All Breweries',
-          children,
-        }]
-      },
-    },
-
-    watch: {
-      breweries (val) {
-        this.types = val.reduce((acc, cur) => {
-          const type = cur.brewery_type
-
-          if (!acc.includes(type)) acc.push(type)
 
-          return acc
-        }, []).sort()
-      },
-    },
-
-    methods: {
-      load () {
-        if (this.breweries.length) return
-
-        return fetch('https://api.openbrewerydb.org/breweries')
-          .then(res => res.json())
-          .then(data => (this.breweries = data))
-          .catch(err => console.log(err))
-      },
-      getChildren (type) {
-        const breweries = []
-
-        for (const brewery of this.breweries) {
-          if (brewery.brewery_type !== type) continue
-
-          breweries.push({
-            ...brewery,
-            name: this.getName(brewery.name),
-          })
-        }
-
-        return breweries.sort((a, b) => {
-          return a.name > b.name ? 1 : -1
-        })
-      },
-      getName (name) {
-        return `${name.charAt(0).toUpperCase()}${name.slice(1)}`
-      },
-    },
-  }
+    const children = types.value.map(type => ({
+      id: type,
+      name: getName(type),
+      children: getChildren(type),
+    }))
+    const rootObj = items.value[0]
+    rootObj.children = children
+    items.value = [rootObj]
+  })
 </script>
diff --git a/packages/docs/src/examples/v-treeview/prop-activatable.vue b/packages/docs/src/examples/v-treeview/prop-activatable.vue
index 3d6a9fd765eb..78ab01af4e0b 100644
--- a/packages/docs/src/examples/v-treeview/prop-activatable.vue
+++ b/packages/docs/src/examples/v-treeview/prop-activatable.vue
@@ -1,6 +1,7 @@
 <template>
   <v-treeview
     :items="items"
+    item-value="id"
     activatable
   ></v-treeview>
 </template>
diff --git a/packages/docs/src/examples/v-treeview/prop-color.vue b/packages/docs/src/examples/v-treeview/prop-color.vue
index a3b81739f992..a3f869c340a6 100644
--- a/packages/docs/src/examples/v-treeview/prop-color.vue
+++ b/packages/docs/src/examples/v-treeview/prop-color.vue
@@ -2,6 +2,7 @@
   <v-treeview
     :items="items"
     color="warning"
+    item-value="id"
     activatable
   ></v-treeview>
 </template>
diff --git a/packages/docs/src/examples/v-treeview/prop-selection-type.vue b/packages/docs/src/examples/v-treeview/prop-selection-type.vue
index c4d3f4379ae8..260f3abc9e34 100644
--- a/packages/docs/src/examples/v-treeview/prop-selection-type.vue
+++ b/packages/docs/src/examples/v-treeview/prop-selection-type.vue
@@ -2,16 +2,16 @@
   <v-container>
     <v-select
       v-model="selectionType"
-      :items="['leaf', 'independent']"
+      :items="['leaf', 'single-leaf', 'independent', 'single-independent', 'classic']"
       label="Selection type"
     ></v-select>
     <v-row>
       <v-col>
         <v-treeview
-          v-model="selection"
+          v-model:selected="selection"
           :items="items"
-          :selection-type="selectionType"
-          open-all
+          :select-strategy="selectionType"
+          item-value="id"
           return-object
           selectable
         ></v-treeview>
@@ -29,7 +29,7 @@
             v-for="node in selection"
             :key="node.id"
           >
-            {{ node.name }}
+            {{ node.title }}
           </div>
         </template>
       </v-col>
diff --git a/packages/docs/src/examples/v-treeview/slot-append-and-label.vue b/packages/docs/src/examples/v-treeview/slot-append-and-label.vue
index e52f27851dac..bde4d84e37ad 100644
--- a/packages/docs/src/examples/v-treeview/slot-append-and-label.vue
+++ b/packages/docs/src/examples/v-treeview/slot-append-and-label.vue
@@ -1,15 +1,14 @@
 <template>
   <v-treeview
-    v-model="tree"
     :items="items"
     :opened="initiallyOpen"
-    item-key="name"
+    item-value="title"
     activatable
     open-on-click
   >
-    <template v-slot:prepend="{ item, open }">
+    <template v-slot:prepend="{ item, isOpen }">
       <v-icon v-if="!item.file">
-        {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
+        {{ isOpen ? 'mdi-folder-open' : 'mdi-folder' }}
       </v-icon>
       <v-icon v-else>
         {{ files[item.file] }}
@@ -32,7 +31,6 @@
     txt: 'mdi-file-document-outline',
     xls: 'mdi-file-excel',
   })
-  const tree = ref([])
   const items = ref([
     {
       title: '.git',
@@ -86,74 +84,3 @@
     },
   ])
 </script>
-
-<script>
-  export default {
-    data: () => ({
-      initiallyOpen: ['public'],
-      files: {
-        html: 'mdi-language-html5',
-        js: 'mdi-nodejs',
-        json: 'mdi-code-json',
-        md: 'mdi-language-markdown',
-        pdf: 'mdi-file-pdf-box',
-        png: 'mdi-file-image',
-        txt: 'mdi-file-document-outline',
-        xls: 'mdi-file-excel',
-      },
-      tree: [],
-      items: [
-        {
-          title: '.git',
-        },
-        {
-          title: 'node_modules',
-        },
-        {
-          title: 'public',
-          children: [
-            {
-              title: 'static',
-              children: [{
-                title: 'logo.png',
-                file: 'png',
-              }],
-            },
-            {
-              title: 'favicon.ico',
-              file: 'png',
-            },
-            {
-              title: 'index.html',
-              file: 'html',
-            },
-          ],
-        },
-        {
-          title: '.gitignore',
-          file: 'txt',
-        },
-        {
-          title: 'babel.config.js',
-          file: 'js',
-        },
-        {
-          title: 'package.json',
-          file: 'json',
-        },
-        {
-          title: 'README.md',
-          file: 'md',
-        },
-        {
-          title: 'vue.config.js',
-          file: 'js',
-        },
-        {
-          title: 'yarn.lock',
-          file: 'txt',
-        },
-      ],
-    }),
-  }
-</script>
diff --git a/packages/docs/src/pages/en/components/treeview.md b/packages/docs/src/pages/en/components/treeview.md
index 664e700c1d9d..5458926add36 100644
--- a/packages/docs/src/pages/en/components/treeview.md
+++ b/packages/docs/src/pages/en/components/treeview.md
@@ -136,9 +136,9 @@ Shaped treeview's have rounded borders on one side of the nodes.
 
 ### Slots
 
-#### Append and label
+#### Prepend
 
-Using the the **label**, and an **append** slots we are able to create an intuitive file explorer.
+Using the the **prepend** slot we are able to create an intuitive file explorer.
 
 <ExamplesExample file="v-treeview/slot-append-and-label" />
 
diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass
index e9eb31fd3680..3dfb6b0b782a 100644
--- a/packages/vuetify/src/components/VList/VListItem.sass
+++ b/packages/vuetify/src/components/VList/VListItem.sass
@@ -319,7 +319,7 @@
   .v-list-group__items .v-list-item
     padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important
 
-  .v-list-group__header:not(.v-treeview-item--activetable-group-activator).v-list-item--active
+  .v-list-group__header:not(.v-treeview-item--activatable-group-activator).v-list-item--active
     &:not(:focus-visible)
       .v-list-item__overlay
         opacity: 0
diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
index 5033f7954e1b..9a924136c21e 100644
--- a/packages/vuetify/src/components/VList/VListItem.tsx
+++ b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -36,6 +36,7 @@ import type { RippleDirectiveBinding } from '@/directives/ripple'
 
 export type ListItemSlot = {
   isActive: boolean
+  isOpen: boolean
   isSelected: boolean
   isIndeterminate: boolean
   select: (value: boolean) => void
@@ -86,7 +87,7 @@ export const makeVListItemProps = propsFactory({
   title: [String, Number],
   value: null,
 
-  onClick: EventProp<[MouseEvent]>(),
+  onClick: EventProp<[MouseEvent | KeyboardEvent]>(),
   onClickOnce: EventProp<[MouseEvent]>(),
 
   ...makeBorderProps(),
@@ -119,6 +120,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
       activate,
       isActivated,
       select,
+      isOpen,
       isSelected,
       isIndeterminate,
       isGroupActivator,
@@ -167,6 +169,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
     const slotProps = computed(() => ({
       isActive: isActive.value,
       select,
+      isOpen: isOpen.value,
       isSelected: isSelected.value,
       isIndeterminate: isIndeterminate.value,
     } satisfies ListItemSlot))
diff --git a/packages/vuetify/src/composables/nested/nested.ts b/packages/vuetify/src/composables/nested/nested.ts
index 86c12677489b..5f80f4da0906 100644
--- a/packages/vuetify/src/composables/nested/nested.ts
+++ b/packages/vuetify/src/composables/nested/nested.ts
@@ -118,7 +118,7 @@ export const useNested = (props: NestedProps) => {
   const children = ref(new Map<unknown, unknown[]>())
   const parents = ref(new Map<unknown, unknown>())
 
-  const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()])
+  const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(toRaw(v)), v => [...v.values()])
 
   const activeStrategy = computed(() => {
     if (typeof props.activeStrategy === 'object') return props.activeStrategy
@@ -306,9 +306,9 @@ export const useNestedItem = (id: Ref<unknown>, isGroup: boolean) => {
   const item = {
     ...parent,
     id: computedId,
-    open: (open: boolean, e: Event) => parent.root.open(computedId.value, open, e),
+    open: (open: boolean, e: Event) => parent.root.open(toRaw(computedId.value), open, e),
     openOnSelect: (open: boolean, e?: Event) => parent.root.openOnSelect(computedId.value, open, e),
-    isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
+    isOpen: computed(() => parent.root.opened.value.has(toRaw(computedId.value))),
     parent: computed(() => parent.root.parents.value.get(computedId.value)),
     activate: (activated: boolean, e?: Event) => parent.root.activate(computedId.value, activated, e),
     isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),
diff --git a/packages/vuetify/src/composables/nested/openStrategies.ts b/packages/vuetify/src/composables/nested/openStrategies.ts
index 5136d4c4a967..ff0f2b3d514b 100644
--- a/packages/vuetify/src/composables/nested/openStrategies.ts
+++ b/packages/vuetify/src/composables/nested/openStrategies.ts
@@ -1,3 +1,6 @@
+// Utilities
+import { toRaw } from 'vue'
+
 export type OpenStrategyFn = (data: {
   id: unknown
   value: boolean
@@ -47,12 +50,12 @@ export const singleOpenStrategy: OpenStrategy = {
 export const multipleOpenStrategy: OpenStrategy = {
   open: ({ id, value, opened, parents }) => {
     if (value) {
-      let parent = parents.get(id)
+      let parent = toRaw(parents.get(id))
       opened.add(id)
 
       while (parent != null && parent !== id) {
         opened.add(parent)
-        parent = parents.get(parent)
+        parent = toRaw(parents.get(parent))
       }
 
       return opened
diff --git a/packages/vuetify/src/composables/nested/selectStrategies.ts b/packages/vuetify/src/composables/nested/selectStrategies.ts
index 1c09acaabce0..42eade6c6ae9 100644
--- a/packages/vuetify/src/composables/nested/selectStrategies.ts
+++ b/packages/vuetify/src/composables/nested/selectStrategies.ts
@@ -149,23 +149,23 @@ export const classicSelectStrategy = (mandatory?: boolean): SelectStrategy => {
       while (items.length) {
         const item = items.shift()!
 
-        selected.set(item, value ? 'on' : 'off')
+        selected.set(toRaw(item), value ? 'on' : 'off')
 
         if (children.has(item)) {
           items.push(...children.get(item)!)
         }
       }
 
-      let parent = parents.get(id)
+      let parent = toRaw(parents.get(id))
 
       while (parent) {
         const childrenIds = children.get(parent)!
-        const everySelected = childrenIds.every(cid => selected.get(cid) === 'on')
-        const noneSelected = childrenIds.every(cid => !selected.has(cid) || selected.get(cid) === 'off')
+        const everySelected = childrenIds.every(cid => selected.get(toRaw(cid)) === 'on')
+        const noneSelected = childrenIds.every(cid => !selected.has(toRaw(cid)) || selected.get(toRaw(cid)) === 'off')
 
         selected.set(parent, everySelected ? 'on' : noneSelected ? 'off' : 'indeterminate')
 
-        parent = parents.get(parent)
+        parent = toRaw(parents.get(parent))
       }
 
       // If mandatory and planned deselect results in no selected
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
index f6d3560039e6..285c449fe12b 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
@@ -8,11 +8,12 @@ import { makeFilterProps, useFilter } from '@/composables/filter'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed, provide, ref, toRef } from 'vue'
+import { computed, provide, ref, toRaw, toRef } from 'vue'
 import { genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import { VTreeviewSymbol } from './shared'
+import type { InternalListItem } from '@/components/VList/VList'
 import type { VListChildrenSlots } from '@/components/VList/VListChildren'
 import type { ListItem } from '@/composables/list-items'
 import type { GenericProps } from '@/util'
@@ -35,7 +36,7 @@ export const makeVTreeviewProps = propsFactory({
     collapseIcon: '$treeviewCollapse',
     expandIcon: '$treeviewExpand',
     slim: true,
-  }), ['nav']),
+  }), ['nav', 'openStrategy']),
 }, 'VTreeview')
 
 export const VTreeview = genericComponent<new <T>(
@@ -101,13 +102,13 @@ export const VTreeview = genericComponent<new <T>(
       return arr
     }
 
-    function openAll (item: any) {
-      let ids: number[] = []
+    function openAll (items: InternalListItem<any>[]) {
+      let ids: any[] = []
 
-      for (const i of item) {
+      for (const i of items) {
         if (!i.children) continue
 
-        ids.push(i.value)
+        ids.push(props.returnObject ? toRaw(i.raw) : i.value)
 
         if (i.children) {
           ids = ids.concat(openAll(i.children))
@@ -152,6 +153,7 @@ export const VTreeview = genericComponent<new <T>(
             'v-treeview',
             props.class,
           ]}
+          open-strategy="multiple"
           style={ props.style }
           opened={ opened.value }
           v-model:activated={ activated.value }
@@ -159,6 +161,7 @@ export const VTreeview = genericComponent<new <T>(
         >
           <VTreeviewChildren
             { ...treeviewChildrenProps }
+            returnObject={ props.returnObject }
             items={ items.value }
             v-slots={ slots }
           ></VTreeviewChildren>
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
index 17d40421270a..8d749d146784 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
@@ -3,8 +3,11 @@ import { VTreeviewGroup } from './VTreeviewGroup'
 import { VTreeviewItem } from './VTreeviewItem'
 import { VCheckboxBtn } from '@/components/VCheckbox'
 
+// Composables
+import { IconValue } from '@/composables/icons'
+
 // Utilities
-import { shallowRef, withModifiers } from 'vue'
+import { computed, shallowRef, toRaw, withModifiers } from 'vue'
 import { genericComponent, propsFactory } from '@/util'
 
 // Types
@@ -28,7 +31,19 @@ export const makeVTreeviewChildrenProps = propsFactory({
     default: '$loading',
   },
   items: Array as PropType<readonly InternalListItem[]>,
+  openOnClick: {
+    type: Boolean,
+    default: undefined,
+  },
+  indeterminateIcon: {
+    type: IconValue,
+    default: '$checkboxIndeterminate',
+  },
+  falseIcon: IconValue,
+  trueIcon: IconValue,
+  returnObject: Boolean,
   selectable: Boolean,
+  selectedColor: String,
   selectStrategy: [String, Function, Object] as PropType<SelectStrategyProp>,
 }, 'VTreeviewChildren')
 
@@ -45,6 +60,8 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
   setup (props, { emit, slots }) {
     const isLoading = shallowRef(null)
 
+    const isClickOnOpen = computed(() => props.openOnClick != null ? props.openOnClick : props.selectable)
+
     function checkChildren (item: any) {
       return new Promise<void>(resolve => {
         if (!props.items?.length || !props.loadChildren) return resolve()
@@ -79,7 +96,11 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
                   key={ item.value }
                   modelValue={ slotProps.isSelected }
                   loading={ loading }
+                  color={ props.selectedColor }
                   indeterminate={ slotProps.isIndeterminate }
+                  indeterminateIcon={ props.indeterminateIcon }
+                  falseIcon={ props.falseIcon }
+                  trueIcon={ props.trueIcon }
                   onClick={ withModifiers(() => selectItem(slotProps.select, slotProps.isSelected), ['stop']) }
                   onKeydown={ (e: KeyboardEvent) => {
                     if (!['Enter', 'Space'].includes(e.key)) return
@@ -102,8 +123,8 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
 
       return children ? (
         <VTreeviewGroup
-          value={ itemProps?.value }
           { ...treeviewGroupProps }
+          value={ props.returnObject ? item : treeviewGroupProps?.value }
         >
           {{
             activator: ({ props: activatorProps }) => {
@@ -111,14 +132,16 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
                 ...itemProps,
                 ...activatorProps,
                 value: itemProps?.value,
+                onToggleExpand: activatorProps.onClick as any,
+                onClick: isClickOnOpen.value ? [() => checkChildren(item), activatorProps.onClick] as any : undefined,
               }
 
               return (
                 <VTreeviewItem
                   { ...listItemProps }
+                  value={ props.returnObject ? toRaw(item) : itemProps.value }
                   loading={ loading }
                   v-slots={ slotsWithItem }
-                  onClick={ () => checkChildren(item) }
                 />
               )
             },
@@ -126,6 +149,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
               <VTreeviewChildren
                 { ...treeviewChildrenProps }
                 items={ children }
+                returnObject={ props.returnObject }
                 v-slots={ slots }
               />
             ),
@@ -135,6 +159,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
         slots.item?.({ props: itemProps }) ?? (
           <VTreeviewItem
             { ...itemProps }
+            value={ props.returnObject ? toRaw(item) : itemProps.value }
             v-slots={ slotsWithItem }
           />
         ))
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
index fea97419ddf4..aaa6aa59b2bc 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -3,27 +3,26 @@ import './VTreeviewItem.sass'
 
 // Components
 import { VBtn } from '@/components/VBtn'
-import { VListItemAction, VListItemSubtitle, VListItemTitle } from '@/components/VList'
+import { VListItemAction } from '@/components/VList'
 import { makeVListItemProps, VListItem } from '@/components/VList/VListItem'
 import { VProgressCircular } from '@/components/VProgressCircular'
 
 // Composables
-import { useDensity } from '@/composables/density'
 import { IconValue } from '@/composables/icons'
 import { useNestedItem } from '@/composables/nested/nested'
 import { useLink } from '@/composables/router'
-import { genOverlays } from '@/composables/variant'
 
 // Utilities
 import { computed, inject, ref } from 'vue'
-import { genericComponent, propsFactory, useRender } from '@/util'
+import { EventProp, genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import { VTreeviewSymbol } from './shared'
-import type { ListItemSlot, VListItemSlots } from '@/components/VList/VListItem'
+import type { VListItemSlots } from '@/components/VList/VListItem'
 
 export const makeVTreeviewItemProps = propsFactory({
   loading: Boolean,
+  onToggleExpand: EventProp<[MouseEvent]>(),
   toggleIcon: IconValue,
 
   ...makeVListItemProps({ slim: true }),
@@ -42,9 +41,6 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
     const {
       activate,
       isActivated,
-      select,
-      isSelected,
-      isIndeterminate,
       isGroupActivator,
       root,
       id,
@@ -55,19 +51,10 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
       isGroupActivator
     )
 
-    const { densityClasses } = useDensity(props, 'v-list-item')
-
-    const slotProps = computed(() => ({
-      isActive: isActivated.value,
-      select,
-      isSelected: isSelected.value,
-      isIndeterminate: isIndeterminate.value,
-    } satisfies ListItemSlot))
-
     const isClickable = computed(() =>
       !props.disabled &&
       props.link !== false &&
-      (props.link || link.isClickable.value || (props.value != null && !!vListItemRef.value?.list))
+      (props.link || link.isClickable.value || (props.value != null && !!vListItemRef.value?.list) || isActivatableGroupActivator.value)
     )
 
     function activateItem (e: MouseEvent | KeyboardEvent) {
@@ -85,97 +72,26 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
       }
     }
 
-    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
-        ? (
-          <div
-            class={[
-              'v-list-item',
-              'v-list-item--one-line',
-              'v-treeview-item',
-              'v-treeview-item--activetable-group-activator',
-              {
-                'v-list-item--active': isActivated.value || isSelected.value,
-                'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(id.value),
-              },
-              densityClasses.value,
-              props.class,
-            ]}
-            onClick={ activateItem }
-            v-ripple={ isClickable.value && props.ripple }
-          >
-            <>
-              { genOverlays(isActivated.value || isSelected.value, 'v-list-item') }
-              { props.toggleIcon && (
-                <VListItemAction start={ false }>
-                  <VBtn
-                    density="compact"
-                    icon={ props.toggleIcon }
-                    loading={ props.loading }
-                    variant="text"
-                    onClick={ props.onClick }
-                  >
-                    {{
-                      loader () {
-                        return (
-                          <VProgressCircular
-                            indeterminate="disable-shrink"
-                            size="20"
-                            width="2"
-                          />
-                        )
-                      },
-                    }}
-                  </VBtn>
-                </VListItemAction>
-              )}
-
-             </>
-
-            <div class="v-list-item__content" data-no-activator="">
-              { hasTitle && (
-                <VListItemTitle key="title">
-                  { slots.title?.({ title: props.title }) ?? props.title }
-                </VListItemTitle>
-              )}
-
-              { hasSubtitle && (
-                <VListItemSubtitle key="subtitle">
-                  { slots.subtitle?.({ subtitle: props.subtitle }) ?? props.subtitle }
-                </VListItemSubtitle>
-              )}
-
-              { slots.default?.(slotProps.value) }
-            </div>
-          </div>
-        ) : (
+      return (
         <VListItem
-          ref={ vListItemRef }
           { ...listItemProps }
+          active={ isActivated.value }
           class={[
             'v-treeview-item',
             {
+              'v-treeview-item--activatable-group-activator': isActivatableGroupActivator.value,
               'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(id.value),
             },
             props.class,
           ]}
-          value={ id.value }
-          onClick={ activateItem }
-          onKeydown={ isClickable.value && onKeyDown }
+          ripple={ false }
+          onClick={ props.onClick ?? activateItem }
         >
           {{
             ...slots,
@@ -189,6 +105,7 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
                         icon={ props.toggleIcon }
                         loading={ props.loading }
                         variant="text"
+                        onClick={ props.onToggleExpand }
                       >
                         {{
                           loader () {
@@ -211,7 +128,7 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
             } : undefined,
           }}
         </VListItem>
-        )
+      )
     })
 
     return {}
diff --git a/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.cy.tsx b/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.cy.tsx
index 53d114a8fab3..365646f11eeb 100644
--- a/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.cy.tsx
+++ b/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.cy.tsx
@@ -6,26 +6,31 @@ import { VTreeview } from '../VTreeview'
 // Utilities
 import { ref } from 'vue'
 
+function compareItemObject (a: any, b: any) {
+  return a.id - b.id
+}
+
+const items = ref([
+  {
+    id: 1,
+    title: 'Videos :',
+    children: [
+      {
+        id: 2,
+        title: 'Tutorials :',
+        children: [
+          { id: 3, title: 'Basic layouts : mp4' },
+          { id: 4, title: 'Advanced techniques : mp4' },
+          { id: 5, title: 'All about app : dir' },
+        ],
+      },
+      { id: 6, title: 'Intro : mov' },
+      { id: 7, title: 'Conference introduction : avi' },
+    ],
+  },
+])
+
 describe('VTreeview', () => {
-  const items = ref([
-    {
-      id: 1,
-      title: 'Videos :',
-      children: [
-        {
-          id: 2,
-          title: 'Tutorials :',
-          children: [
-            { id: 3, title: 'Basic layouts : mp4' },
-            { id: 4, title: 'Advanced techniques : mp4' },
-            { id: 5, title: 'All about app : dir' },
-          ],
-        },
-        { id: 6, title: 'Intro : mov' },
-        { id: 7, title: 'Conference introduction : avi' },
-      ],
-    },
-  ])
   describe('activate', () => {
     it('single-leaf strategy', () => {
       const activated = ref([])
@@ -259,6 +264,7 @@ describe('VTreeview', () => {
           expect(selected.value.sort()).to.deep.equal([1].sort())
         })
     })
+
     it('classic strategy', () => {
       const selected = ref([])
       cy.mount(() => (
@@ -291,6 +297,544 @@ describe('VTreeview', () => {
         })
     })
   })
+
+  describe('return-object', () => {
+    describe('open', () => {
+      it('opan-all should work', () => {
+        cy.mount(() => (
+          <>
+            <VTreeview
+              open-all
+              items={ items.value }
+              item-title="title"
+              item-value="id"
+              return-object
+            />
+          </>
+        ))
+          .get('.v-treeview-item').eq(1).should('be.visible')
+          .get('.v-treeview-item').eq(2).should('be.visible')
+          .get('.v-treeview-item').eq(3).should('be.visible')
+          .get('.v-treeview-item').eq(4).should('be.visible')
+          .get('.v-treeview-item').eq(5).should('be.visible')
+          .get('.v-treeview-item').eq(6).should('be.visible')
+      })
+      it('should return opened object to v-model:opened', () => {
+        const opened = ref([])
+        cy.mount(() => (
+          <>
+            <VTreeview
+              v-model:opened={ opened.value }
+              items={ items.value }
+              item-title="title"
+              item-value="id"
+              return-object
+            />
+          </>
+        ))
+          .get('.v-list-item-action .v-btn').eq(0).click()
+          .then(_ => {
+            expect(opened.value).to.deep.equal([
+              {
+                id: 1,
+                title: 'Videos :',
+                children: [
+                  {
+                    id: 2,
+                    title: 'Tutorials :',
+                    children: [
+                      { id: 3, title: 'Basic layouts : mp4' },
+                      { id: 4, title: 'Advanced techniques : mp4' },
+                      { id: 5, title: 'All about app : dir' },
+                    ],
+                  },
+                  { id: 6, title: 'Intro : mov' },
+                  { id: 7, title: 'Conference introduction : avi' },
+                ],
+              }])
+          })
+          .get('.v-list-item-action .v-btn').eq(1).click()
+          .then(_ => {
+            expect(opened.value.sort(compareItemObject)).to.deep.equal([
+              {
+                id: 1,
+                title: 'Videos :',
+                children: [
+                  {
+                    id: 2,
+                    title: 'Tutorials :',
+                    children: [
+                      { id: 3, title: 'Basic layouts : mp4' },
+                      { id: 4, title: 'Advanced techniques : mp4' },
+                      { id: 5, title: 'All about app : dir' },
+                    ],
+                  },
+                  { id: 6, title: 'Intro : mov' },
+                  { id: 7, title: 'Conference introduction : avi' },
+                ],
+              },
+              {
+                id: 2,
+                title: 'Tutorials :',
+                children: [
+                  { id: 3, title: 'Basic layouts : mp4' },
+                  { id: 4, title: 'Advanced techniques : mp4' },
+                  { id: 5, title: 'All about app : dir' },
+                ],
+              },
+            ].sort(compareItemObject))
+          })
+      })
+    })
+    describe('activate', () => {
+      it('single-leaf strategy', () => {
+        const activated = ref([])
+        cy.mount(() => (
+          <>
+            <VTreeview
+              v-model:activated={ activated.value }
+              open-all
+              items={ items.value }
+              item-title="title"
+              item-value="id"
+              activatable
+              active-strategy="single-leaf"
+              return-object
+            />
+          </>
+        ))
+
+        cy.get('.v-treeview-item').should('have.length', 7)
+          .get('.v-treeview-item').eq(0).click()
+          .then(_ => {
+            expect(activated.value).to.deep.equal([])
+          })
+          .get('.v-treeview-item').eq(2).click()
+          .get('.v-treeview-item').eq(3).click()
+          .get('.v-treeview-item').eq(4).click()
+          .then(_ => {
+            expect(activated.value).to.deep.equal([{ id: 5, title: 'All about app : dir' }])
+          })
+      })
+      it('leaf strategy', () => {
+        const activated = ref([])
+        cy.mount(() => (
+          <>
+            <VTreeview
+              v-model:activated={ activated.value }
+              open-all
+              items={ items.value }
+              item-title="title"
+              item-value="id"
+              activatable
+              active-strategy="leaf"
+              return-object
+            />
+          </>
+        ))
+
+        cy.get('.v-treeview-item').should('have.length', 7)
+          .get('.v-treeview-item').eq(0).click()
+          .then(_ => {
+            expect(activated.value).to.deep.equal([])
+          })
+          .get('.v-treeview-item').eq(2).click()
+          .get('.v-treeview-item').eq(3).click()
+          .get('.v-treeview-item').eq(4).click()
+          .then(_ => {
+            expect(activated.value.sort(compareItemObject)).to.deep.equal([
+              { id: 3, title: 'Basic layouts : mp4' },
+              { id: 4, title: 'Advanced techniques : mp4' },
+              { id: 5, title: 'All about app : dir' },
+            ].sort(compareItemObject))
+          })
+      })
+      it('independent strategy', () => {
+        const activated = ref([])
+        cy.mount(() => (
+          <>
+            <VTreeview
+              v-model:activated={ activated.value }
+              open-all
+              items={ items.value }
+              item-title="title"
+              item-value="id"
+              activatable
+              active-strategy="independent"
+              return-object
+            />
+          </>
+        ))
+
+        cy.get('.v-treeview-item').should('have.length', 7)
+          .get('.v-treeview-item').eq(0).click()
+          .then(_ => {
+            expect(activated.value).to.deep.equal([
+              {
+                id: 1,
+                title: 'Videos :',
+                children: [
+                  {
+                    id: 2,
+                    title: 'Tutorials :',
+                    children: [
+                      { id: 3, title: 'Basic layouts : mp4' },
+                      { id: 4, title: 'Advanced techniques : mp4' },
+                      { id: 5, title: 'All about app : dir' },
+                    ],
+                  },
+                  { id: 6, title: 'Intro : mov' },
+                  { id: 7, title: 'Conference introduction : avi' },
+                ],
+              },
+            ])
+          })
+          .get('.v-treeview-item').eq(1).click()
+          .then(_ => {
+            expect(activated.value.sort(compareItemObject)).to.deep.equal([
+              {
+                id: 1,
+                title: 'Videos :',
+                children: [
+                  {
+                    id: 2,
+                    title: 'Tutorials :',
+                    children: [
+                      { id: 3, title: 'Basic layouts : mp4' },
+                      { id: 4, title: 'Advanced techniques : mp4' },
+                      { id: 5, title: 'All about app : dir' },
+                    ],
+                  },
+                  { id: 6, title: 'Intro : mov' },
+                  { id: 7, title: 'Conference introduction : avi' },
+                ],
+              },
+              {
+                id: 2,
+                title: 'Tutorials :',
+                children: [
+                  { id: 3, title: 'Basic layouts : mp4' },
+                  { id: 4, title: 'Advanced techniques : mp4' },
+                  { id: 5, title: 'All about app : dir' },
+                ],
+              },
+            ].sort(compareItemObject))
+          })
+          .get('.v-treeview-item').eq(2).click()
+          .get('.v-treeview-item').eq(3).click()
+          .get('.v-treeview-item').eq(4).click()
+          .then(_ => {
+            expect(activated.value.sort(compareItemObject)).to.deep.equal([
+              {
+                id: 1,
+                title: 'Videos :',
+                children: [
+                  {
+                    id: 2,
+                    title: 'Tutorials :',
+                    children: [
+                      { id: 3, title: 'Basic layouts : mp4' },
+                      { id: 4, title: 'Advanced techniques : mp4' },
+                      { id: 5, title: 'All about app : dir' },
+                    ],
+                  },
+                  { id: 6, title: 'Intro : mov' },
+                  { id: 7, title: 'Conference introduction : avi' },
+                ],
+              },
+              {
+                id: 2,
+                title: 'Tutorials :',
+                children: [
+                  { id: 3, title: 'Basic layouts : mp4' },
+                  { id: 4, title: 'Advanced techniques : mp4' },
+                  { id: 5, title: 'All about app : dir' },
+                ],
+              },
+              { id: 3, title: 'Basic layouts : mp4' },
+              { id: 4, title: 'Advanced techniques : mp4' },
+              { id: 5, title: 'All about app : dir' },
+            ].sort(compareItemObject))
+          })
+      })
+      it('single-independent strategy', () => {
+        const activated = ref([])
+        cy.mount(() => (
+          <>
+            <VTreeview
+              v-model:activated={ activated.value }
+              open-all
+              items={ items.value }
+              item-title="title"
+              item-value="id"
+              activatable
+              active-strategy="single-independent"
+              return-object
+            />
+          </>
+        ))
+
+        cy.get('.v-treeview-item').should('have.length', 7)
+          .get('.v-treeview-item').eq(0).click()
+          .then(_ => {
+            expect(activated.value).to.deep.equal([
+              {
+                id: 1,
+                title: 'Videos :',
+                children: [
+                  {
+                    id: 2,
+                    title: 'Tutorials :',
+                    children: [
+                      { id: 3, title: 'Basic layouts : mp4' },
+                      { id: 4, title: 'Advanced techniques : mp4' },
+                      { id: 5, title: 'All about app : dir' },
+                    ],
+                  },
+                  { id: 6, title: 'Intro : mov' },
+                  { id: 7, title: 'Conference introduction : avi' },
+                ],
+              },
+            ])
+          })
+          .get('.v-treeview-item').eq(1).click()
+          .then(_ => {
+            expect(activated.value).to.deep.equal([
+              {
+                id: 2,
+                title: 'Tutorials :',
+                children: [
+                  { id: 3, title: 'Basic layouts : mp4' },
+                  { id: 4, title: 'Advanced techniques : mp4' },
+                  { id: 5, title: 'All about app : dir' },
+                ],
+              },
+            ])
+          })
+          .get('.v-treeview-item').eq(2).click()
+          .get('.v-treeview-item').eq(3).click()
+          .get('.v-treeview-item').eq(4).click()
+          .then(_ => {
+            expect(activated.value).to.deep.equal([{ id: 5, title: 'All about app : dir' }])
+          })
+      })
+    })
+    describe('select', () => {
+      it('single-leaf strategy', () => {
+        const selected = ref([])
+        cy.mount(() => (
+          <>
+            <VTreeview
+              v-model:selected={ selected.value }
+              open-all
+              items={ items.value }
+              item-title="title"
+              item-value="id"
+              return-object
+              selectable
+              select-strategy="single-leaf"
+            />
+          </>
+        ))
+
+        cy.get('.v-checkbox-btn').should('have.length', 5)
+          .get('.v-checkbox-btn').eq(0).click(20, 20)
+          .get('.v-checkbox-btn').eq(1).click(20, 20)
+          .then(_ => {
+            expect(selected.value).to.deep.equal([{ id: 4, title: 'Advanced techniques : mp4' }])
+          })
+          .get('.v-checkbox-btn').eq(3).click(20, 20)
+          .then(_ => {
+            expect(selected.value).to.deep.equal([{ id: 6, title: 'Intro : mov' }])
+          })
+      })
+      it('leaf strategy', () => {
+        const selected = ref([])
+        cy.mount(() => (
+          <>
+            <VTreeview
+              v-model:selected={ selected.value }
+              open-all
+              items={ items.value }
+              item-title="title"
+              item-value="id"
+              return-object
+              selectable
+              select-strategy="leaf"
+            />
+          </>
+        ))
+
+        cy.get('.v-checkbox-btn').should('have.length', 5)
+          .get('.v-checkbox-btn').eq(0).click(20, 20)
+          .get('.v-checkbox-btn').eq(1).click(20, 20)
+          .then(_ => {
+            expect(selected.value.sort(compareItemObject)).to.deep.equal([
+              { id: 3, title: 'Basic layouts : mp4' },
+              { id: 4, title: 'Advanced techniques : mp4' },
+            ].sort(compareItemObject))
+          })
+          .get('.v-checkbox-btn').eq(3).click(20, 20)
+          .then(_ => {
+            expect(selected.value.sort(compareItemObject)).to.deep.equal([
+              { id: 3, title: 'Basic layouts : mp4' },
+              { id: 4, title: 'Advanced techniques : mp4' },
+              { id: 6, title: 'Intro : mov' },
+            ].sort(compareItemObject))
+          })
+      })
+      it('independent strategy', () => {
+        const selected = ref([])
+        cy.mount(() => (
+          <>
+            <VTreeview
+              v-model:selected={ selected.value }
+              open-all
+              items={ items.value }
+              item-title="title"
+              item-value="id"
+              return-object
+              selectable
+              select-strategy="independent"
+            />
+          </>
+        ))
+
+        cy.get('.v-checkbox-btn').should('have.length', 7)
+          .get('.v-checkbox-btn').eq(2).click(20, 20)
+          .get('.v-checkbox-btn').eq(3).click(20, 20)
+          .then(_ => {
+            expect(selected.value.sort(compareItemObject)).to.deep.equal([
+              { id: 3, title: 'Basic layouts : mp4' },
+              { id: 4, title: 'Advanced techniques : mp4' },
+            ].sort(compareItemObject))
+          })
+          .get('.v-checkbox-btn').eq(1).click(20, 20)
+          .get('.v-checkbox-btn').eq(0).click(20, 20)
+          .then(_ => {
+            expect(selected.value.sort(compareItemObject)).to.deep.equal([
+              {
+                id: 1,
+                title: 'Videos :',
+                children: [
+                  {
+                    id: 2,
+                    title: 'Tutorials :',
+                    children: [
+                      { id: 3, title: 'Basic layouts : mp4' },
+                      { id: 4, title: 'Advanced techniques : mp4' },
+                      { id: 5, title: 'All about app : dir' },
+                    ],
+                  },
+                  { id: 6, title: 'Intro : mov' },
+                  { id: 7, title: 'Conference introduction : avi' },
+                ],
+              },
+              {
+                id: 2,
+                title: 'Tutorials :',
+                children: [
+                  { id: 3, title: 'Basic layouts : mp4' },
+                  { id: 4, title: 'Advanced techniques : mp4' },
+                  { id: 5, title: 'All about app : dir' },
+                ],
+              },
+              { id: 3, title: 'Basic layouts : mp4' },
+              { id: 4, title: 'Advanced techniques : mp4' },
+            ].sort(compareItemObject))
+          })
+      })
+      it('single-independent strategy', () => {
+        const selected = ref([])
+        cy.mount(() => (
+          <>
+            <VTreeview
+              v-model:selected={ selected.value }
+              open-all
+              items={ items.value }
+              item-title="title"
+              item-value="id"
+              return-object
+              selectable
+              select-strategy="single-independent"
+            />
+          </>
+        ))
+
+        cy.get('.v-checkbox-btn').should('have.length', 7)
+          .get('.v-checkbox-btn').eq(2).click(20, 20)
+          .get('.v-checkbox-btn').eq(3).click(20, 20)
+          .then(_ => {
+            expect(selected.value).to.deep.equal([{ id: 4, title: 'Advanced techniques : mp4' }])
+          })
+          .get('.v-checkbox-btn').eq(1).click(20, 20)
+          .get('.v-checkbox-btn').eq(0).click(20, 20)
+          .then(_ => {
+            expect(selected.value).to.deep.equal([
+              {
+                id: 1,
+                title: 'Videos :',
+                children: [
+                  {
+                    id: 2,
+                    title: 'Tutorials :',
+                    children: [
+                      { id: 3, title: 'Basic layouts : mp4' },
+                      { id: 4, title: 'Advanced techniques : mp4' },
+                      { id: 5, title: 'All about app : dir' },
+                    ],
+                  },
+                  { id: 6, title: 'Intro : mov' },
+                  { id: 7, title: 'Conference introduction : avi' },
+                ],
+              },
+            ])
+          })
+      })
+
+      it('classic strategy', () => {
+        const selected = ref([])
+        cy.mount(() => (
+          <>
+            <VTreeview
+              v-model:selected={ selected.value }
+              open-all
+              items={ items.value }
+              item-title="title"
+              item-value="id"
+              selectable
+              return-object
+              select-strategy="classic"
+            />
+          </>
+        ))
+
+        cy.get('.v-checkbox-btn').eq(0).click(20, 20)
+          .then(_ => {
+            expect(selected.value.sort(compareItemObject)).to.deep.equal([
+              { id: 3, title: 'Basic layouts : mp4' },
+              { id: 4, title: 'Advanced techniques : mp4' },
+              { id: 5, title: 'All about app : dir' },
+              { id: 6, title: 'Intro : mov' },
+              { id: 7, title: 'Conference introduction : avi' },
+            ].sort(compareItemObject))
+          })
+          .get('.v-checkbox-btn').eq(0).click(20, 20)
+          .then(_ => {
+            expect(selected.value).to.deep.equal([])
+          })
+          .get('.v-checkbox-btn').eq(1).click(20, 20)
+          .then(_ => {
+            expect(selected.value.sort(compareItemObject)).to.deep.equal([
+              { id: 3, title: 'Basic layouts : mp4' },
+              { id: 4, title: 'Advanced techniques : mp4' },
+              { id: 5, title: 'All about app : dir' },
+            ].sort(compareItemObject))
+          })
+      })
+    })
+  })
+
   it('should have all items visible when open-all is applied', () => {
     cy.mount(() => (
       <>