fix(VListGroup): fix unmounting to clear opened

lzl0304 · Jul 21, 2024 · 360fff3 · 360fff3
1 parent b94f2b9
commit 360fff3
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx b/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx
@@ -5,6 +5,9 @@ import { VListGroup } from '../VListGroup'
 import { VListItem } from '../VListItem'
 import { VList } from '../VList'
 
+// Utilities
+import { ref } from 'vue'
+
 describe('VListGroup', () => {
   function mountFunction (content: JSX.Element) {
     return cy.mount(() => content)
@@ -49,4 +52,43 @@ describe('VListGroup', () => {
 
     wrapper.get('.v-list-item-title').contains('Group')
   })
+
+  it('should not remove opened when unmounted', () => {
+    const visible = ref(true)
+    const opened = ref(['Users'])
+    const wrapper = mountFunction((
+      <CenteredGrid width="200px">
+        <h2 class="mt-8">ListGroup</h2>
+
+        <VList opened={ opened.value }>
+          {
+            visible.value && (
+              <VListGroup value="Users">
+                {{
+                  default: () => (
+                    <>
+                      <VListItem title="Foo" />
+                      <VListItem title="Bar" />
+                    </>
+                  ),
+                }}
+              </VListGroup>
+            )
+          }
+        </VList>
+      </CenteredGrid>
+    ))
+
+    wrapper.get('.v-list .v-list-group').should('exist')
+      .get('.v-list-group__items').should('be.visible')
+      .then(() => {
+        visible.value = false
+      })
+      .get('.v-list.v-list-group').should('not.exist')
+      .then(() => {
+        visible.value = true
+      })
+      .get('.v-list-group').should('exist')
+      .get('.v-list-group__items').should('be.visible')
+  })
 })
diff --git a/packages/vuetify/src/composables/nested/nested.ts b/packages/vuetify/src/composables/nested/nested.ts
@@ -227,7 +227,6 @@ export const useNested = (props: NestedProps) => {
           children.value.set(parent, list.filter(child => child !== id))
         }
         parents.value.delete(id)
-        opened.value.delete(id)
       },
       open: (id, value, event) => {
         vm.emit('click:open', { id, value, path: getPath(id), event })