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