fix(VTreeview): Incorrect isOpen state in the prepend slot when using…

… return-object (#20884)
vuetifyjs · Jan 19, 2025 · 14be656 · 14be656
1 parent 3810c2a
commit 14be656
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git a/packages/vuetify/src/composables/nested/nested.ts b/packages/vuetify/src/composables/nested/nested.ts
@@ -339,7 +339,7 @@ export const useNestedItem = (id: Ref<unknown>, isGroup: boolean) => {
     isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),
     select: (selected: boolean, e?: Event) => parent.root.select(computedId.value, selected, e),
     isSelected: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'on'),
-    isIndeterminate: computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
+    isIndeterminate: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'indeterminate'),
     isLeaf: computed(() => !parent.root.children.value.get(computedId.value)),
     isGroupActivator: parent.isGroupActivator,
   }

diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
@@ -143,7 +143,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
               return (
                 <VTreeviewItem
                   { ...listItemProps }
-                  value={ props.returnObject ? toRaw(item.raw) : itemProps.value }
+                  value={ props.returnObject ? item.raw : itemProps.value }
                   loading={ loading }
                   v-slots={ slotsWithItem }
                 />

diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -12,7 +12,7 @@ import { IconValue } from '@/composables/icons'
 import { useLink } from '@/composables/router'
 
 // Utilities
-import { computed, inject, ref } from 'vue'
+import { computed, inject, ref, toRaw } from 'vue'
 import { EventProp, genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
@@ -68,7 +68,7 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
             'v-treeview-item',
             {
               'v-treeview-item--activatable-group-activator': isActivatableGroupActivator.value,
-              'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(vListItemRef.value?.id),
+              'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(toRaw(vListItemRef.value?.id)),
             },
             props.class,
           ]}

diff --git a/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx b/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx
@@ -672,4 +672,37 @@ describe.each([
       expect(el).toBeVisible()
     })
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/20830
+  it('should return correct isOpen state in prepend slot', async () => {
+    render(() => (
+      <VTreeview
+        items={ items }
+        item-value="id"
+        open-on-click
+        return-object
+      >
+        {{
+          prepend: ({ isOpen }) => (<span class="prepend-is-open">{ `${isOpen}` }</span>),
+        }}
+      </VTreeview>
+    ))
+
+    await userEvent.click(screen.getByText(/Vuetify Human Resources/))
+    const itemsPrepend = screen.getAllByCSS('.v-treeview-item .v-list-item__prepend .prepend-is-open')
+    expect(itemsPrepend[0]).toHaveTextContent(/^true$/)
+    expect(itemsPrepend[1]).toHaveTextContent(/^false$/)
+
+    await userEvent.click(screen.getByText(/Core team/))
+    expect(itemsPrepend[0]).toHaveTextContent(/^true$/)
+    expect(itemsPrepend[1]).toHaveTextContent(/^true$/)
+
+    await userEvent.click(screen.getByText(/Core team/))
+    expect(itemsPrepend[0]).toHaveTextContent(/^true$/)
+    expect(itemsPrepend[1]).toHaveTextContent(/^false$/)
+
+    await userEvent.click(screen.getByText(/Vuetify Human Resources/))
+    expect(itemsPrepend[0]).toHaveTextContent(/^false$/)
+    expect(itemsPrepend[1]).toHaveTextContent(/^false$/)
+  })
 })