diff --git a/packages/vuetify/src/components/VItemGroup/VItemGroup.ts b/packages/vuetify/src/components/VItemGroup/VItemGroup.ts index c66d291bf22..72d9923611f 100644 --- a/packages/vuetify/src/components/VItemGroup/VItemGroup.ts +++ b/packages/vuetify/src/components/VItemGroup/VItemGroup.ts @@ -219,7 +219,7 @@ export const BaseItemGroup = mixins( ? this.internalValue : [] const internalValue = defaultValue.slice() - const index = internalValue.findIndex(val => val === value) + const index = internalValue.findIndex(val => this.valueComparator(val, value)) if ( this.mandatory && @@ -245,7 +245,7 @@ export const BaseItemGroup = mixins( this.internalValue = internalValue }, updateSingle (value: any) { - const isSame = value === this.internalValue + const isSame = this.valueComparator(this.internalValue, value) if (this.mandatory && isSame) return diff --git a/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.ts b/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.ts index 390de971a5b..9e522dd163b 100644 --- a/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.ts +++ b/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.ts @@ -217,6 +217,18 @@ describe('VItemGroup', () => { wrapper.vm.updateSingle('foo') expect(wrapper.vm.internalValue).toBeUndefined() + // Toggling on and off object references + wrapper.vm.updateSingle({ foo: 'foo' }) + expect(wrapper.vm.internalValue).toEqual({ foo: 'foo' }) + wrapper.vm.updateSingle({ foo: 'foo' }) + expect(wrapper.vm.internalValue).toBeUndefined() + + // Toggling on and off with custom comparator + wrapper.setProps({ valueComparator: (a: any, b: any) => a?.startsWith(b?.[0]), value: 'foo' }) + expect(wrapper.vm.internalValue).toBe('foo') + wrapper.vm.updateSingle('foobar') + expect(wrapper.vm.internalValue).toBeUndefined() + wrapper.setProps({ mandatory: true }) // Toggling off single mandatory @@ -237,6 +249,12 @@ describe('VItemGroup', () => { wrapper.vm.updateMultiple('foo') expect(wrapper.vm.internalValue).toEqual([]) + // Toggling on and off object references + wrapper.vm.updateMultiple({ foo: 'foo' }) + expect(wrapper.vm.internalValue).toEqual([{ foo: 'foo' }]) + wrapper.vm.updateMultiple({ foo: 'foo' }) + expect(wrapper.vm.internalValue).toEqual([]) + wrapper.setProps({ mandatory: true }) // Toggling off single mandatory @@ -256,6 +274,17 @@ describe('VItemGroup', () => { expect(wrapper.vm.internalValue).toEqual(['foo', 'bar', 'fizz']) }) + it('should update a multiple item group with a custom comparator', () => { + const wrapper = mountFunction({ + propsData: { multiple: true }, + }) + + wrapper.setProps({ valueComparator: (a: any, b: any) => a?.startsWith(b?.[0]), value: ['foo'] }) + expect(wrapper.vm.internalValue).toEqual(['foo']) + wrapper.vm.updateMultiple('foobar') + expect(wrapper.vm.internalValue).toEqual([]) + }) + it('should update value if mandatory and dynamic items', async () => { const wrapper = mountFunction({ propsData: {