fix(VItemGroup): use valueComparator when updating value (#15395)

fixes #15394

Author: hrobertson

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
 

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: {