diff --git a/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx b/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx index 8529294be27..c86d5b57f20 100644 --- a/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx +++ b/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx @@ -5,8 +5,13 @@ import { VListGroup } from '../VListGroup' import { VListItem } from '../VListItem' import { VList } from '../VList' +// Components +import { VBtn } from '@/components/VBtn' + // Utilities import { ref } from 'vue' +// Types +import type { Ref } from 'vue' describe('VListGroup', () => { function mountFunction (content: JSX.Element) { @@ -91,4 +96,34 @@ describe('VListGroup', () => { .get('.v-list-group').should('exist') .get('.v-list-group__items').should('be.visible') }) + + // https://github.com/vuetifyjs/vuetify/issues/20354 + it('should support programmatically expand group via open model', () => { + const opened: Ref = ref([]) + + cy.mount(() => ( + <> + { opened.value.push('Users') } }>Click me + + + {{ + activator: ({ props }) => , + default: () => ( + <> + + + + ), + }} + + + + )) + + cy.get('button').click() + .then(_ => { + expect(opened.value).to.deep.equal(['Users']) + }) + .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 index c5b013a3de0..33fdf075aae 100644 --- a/packages/vuetify/src/composables/nested/nested.ts +++ b/packages/vuetify/src/composables/nested/nested.ts @@ -120,7 +120,7 @@ export const useNested = (props: NestedProps) => { const children = ref(new Map()) const parents = ref(new Map()) - const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(toRaw(v)), v => [...v.values()]) + const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()]) const activeStrategy = computed(() => { if (typeof props.activeStrategy === 'object') return props.activeStrategy @@ -321,9 +321,9 @@ export const useNestedItem = (id: Ref, isGroup: boolean) => { const item = { ...parent, id: computedId, - open: (open: boolean, e: Event) => parent.root.open(toRaw(computedId.value), open, e), + open: (open: boolean, e: Event) => parent.root.open(computedId.value, open, e), openOnSelect: (open: boolean, e?: Event) => parent.root.openOnSelect(computedId.value, open, e), - isOpen: computed(() => parent.root.opened.value.has(toRaw(computedId.value))), + isOpen: computed(() => parent.root.opened.value.has(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 ff0f2b3d514..5136d4c4a96 100644 --- a/packages/vuetify/src/composables/nested/openStrategies.ts +++ b/packages/vuetify/src/composables/nested/openStrategies.ts @@ -1,6 +1,3 @@ -// Utilities -import { toRaw } from 'vue' - export type OpenStrategyFn = (data: { id: unknown value: boolean @@ -50,12 +47,12 @@ export const singleOpenStrategy: OpenStrategy = { export const multipleOpenStrategy: OpenStrategy = { open: ({ id, value, opened, parents }) => { if (value) { - let parent = toRaw(parents.get(id)) + let parent = parents.get(id) opened.add(id) while (parent != null && parent !== id) { opened.add(parent) - parent = toRaw(parents.get(parent)) + parent = parents.get(parent) } return opened 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 365646f11ee..541b9f929df 100644 --- a/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.cy.tsx +++ b/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.cy.tsx @@ -300,6 +300,22 @@ describe('VTreeview', () => { describe('return-object', () => { describe('open', () => { + it('open and collapse should both work', () => { + cy.mount(() => ( + <> + + + )) + .get('.v-list-item-action .v-btn').eq(0).click() + .get('.v-list-group__items').eq(0).should('be.visible') + .get('.v-list-item-action .v-btn').eq(0).click() + .get('.v-list-group__items').eq(0).should('not.be.visible') + }) it('opan-all should work', () => { cy.mount(() => ( <>