fix(VTreeview,VList): wire value-comparator into selection logic (#22841)

Co-authored-by: Vaishnavi Deshpande <VDeshpande7@slb.com>
Co-authored-by: J-Sek <J-Sek@users.noreply.github.com>
fixes #22013

Author: 3 people

packages/vuetify/src/components/VList/VList.tsx

@@ -182,6 +182,7 @@ export const VList = genericComponent<new <S, A, O, T extends readonly any[]>(
       items,
       returnObject: toRef(() => props.returnObject),
       scrollToActive: toRef(() => props.navigationStrategy === 'track'),
+      valueComparator: toRef(() => props.valueComparator),
     })
 
     const lineClasses = toRef(() => props.lines ? `v-list--${props.lines}-line` : undefined)

packages/vuetify/src/components/VList/__tests__/VList.spec.browser.tsx

@@ -153,5 +153,67 @@ describe('VList', () => {
     expect(selectedItem.value).toEqual([items[1]])
   })
 
+  describe('value-comparator', () => {
+    it('should apply to initial selected', async () => {
+      const caseItems = [
+        {
+          title: 'Group A',
+          value: 'GROUP_A',
+          children: [
+            { title: 'Alpha', value: 'ALPHA' },
+            { title: 'Beta', value: 'BETA' },
+          ],
+        },
+        {
+          title: 'Group B',
+          value: 'GROUP_B',
+          children: [
+            { title: 'Gamma', value: 'GAMMA' },
+            { title: 'Delta', value: 'DELTA' },
+          ],
+        },
+      ]
+      const selected = ref<string[]>(['beta', 'delta'])
+
+      render(() => (
+        <VList
+          v-model:selected={ selected.value }
+          items={ caseItems }
+          opened={['GROUP_A', 'GROUP_B']}
+          selectStrategy="independent"
+          valueComparator={ (a: string, b: string) => a.toLowerCase() === b.toLowerCase() }
+        />
+      ))
+
+      expect(screen.getByText('Beta').closest('.v-list-item')).toHaveClass('v-list-item--active')
+      expect(screen.getByText('Delta').closest('.v-list-item')).toHaveClass('v-list-item--active')
+      expect(screen.getByText('Alpha').closest('.v-list-item')).not.toHaveClass('v-list-item--active')
+      expect(screen.getByText('Gamma').closest('.v-list-item')).not.toHaveClass('v-list-item--active')
+    })
+
+    it('should apply to initial activated', async () => {
+      const caseItems = [
+        { title: 'Alpha', value: 'ALPHA' },
+        { title: 'Beta', value: 'BETA' },
+        { title: 'Gamma', value: 'GAMMA' },
+      ]
+      const activated = ref<string[]>(['beta'])
+
+      render(() => (
+        <VList
+          v-model:activated={ activated.value }
+          items={ caseItems }
+          activatable
+          activeStrategy="independent"
+          valueComparator={ (a: string, b: string) => a.toLowerCase() === b.toLowerCase() }
+        />
+      ))
+
+      expect(screen.getByText('Beta').closest('.v-list-item')).toHaveClass('v-list-item--active')
+      expect(screen.getByText('Alpha').closest('.v-list-item')).not.toHaveClass('v-list-item--active')
+      expect(screen.getByText('Gamma').closest('.v-list-item')).not.toHaveClass('v-list-item--active')
+    })
+  })
+
   showcase({ stories })
 })

packages/vuetify/src/components/VTreeview/__tests__/VTreeview.spec.browser.tsx

@@ -185,6 +185,35 @@ describe.each([
       await userEvent.click(screen.getByText(/Human Resources/))
       expect(onActivated).toHaveBeenCalledTimes(2)
     })
+
+    it('should apply value-comparator to initial activated', async () => {
+      const caseItems = [
+        {
+          title: 'Group A',
+          value: 'GROUP_A',
+          children: [
+            { title: 'Alpha', value: 'ALPHA' },
+            { title: 'Beta', value: 'BETA' },
+          ],
+        },
+      ]
+      const activated = ref<string[]>(['beta'])
+
+      render(() => (
+        <VTreeview
+          v-model:activated={ activated.value }
+          items={ caseItems }
+          activatable
+          openAll
+          activeStrategy="independent"
+          valueComparator={ (a: string, b: string) => a.toLowerCase() === b.toLowerCase() }
+          itemsRegistration={ itemsRegistration }
+        />
+      ))
+
+      expect(screen.getByText('Beta').closest('.v-list-item')).toHaveClass('v-list-item--active')
+      expect(screen.getByText('Alpha').closest('.v-list-item')).not.toHaveClass('v-list-item--active')
+    })
   })
 
   describe('select', () => {
@@ -303,6 +332,43 @@ describe.each([
       await userEvent.click(screen.getByText(/Vuetify/).parentElement!.previousElementSibling!)
       expect(selected.value).toStrictEqual([4, 201, 202, 203, 204, 205, 301, 302])
     })
+
+    it('should apply value-comparator to initial selected', async () => {
+      const caseItems = [
+        {
+          title: 'Group A',
+          value: 'GROUP_A',
+          children: [
+            { title: 'Alpha', value: 'ALPHA' },
+            { title: 'Beta', value: 'BETA' },
+          ],
+        },
+        {
+          title: 'Group B',
+          value: 'GROUP_B',
+          children: [
+            { title: 'Gamma', value: 'GAMMA' },
+            { title: 'Delta', value: 'DELTA' },
+          ],
+        },
+      ]
+      const selected = ref<string[]>(['beta', 'delta'])
+
+      render(() => (
+        <VTreeview
+          v-model:selected={ selected.value }
+          items={ caseItems }
+          selectable
+          openAll
+          selectStrategy="independent"
+          valueComparator={ (a: string, b: string) => a.toLowerCase() === b.toLowerCase() }
+          itemsRegistration={ itemsRegistration }
+        />
+      ))
+
+      const inputs = screen.getAllByCSS('.v-checkbox-btn input') as HTMLInputElement[]
+      expect(inputs.filter(el => el.checked)).toHaveLength(2)
+    })
   })
 
   describe('return-object', () => {

packages/vuetify/src/composables/nested/nested.ts

@@ -40,7 +40,7 @@ import type { ActiveStrategy } from './activeStrategies'
 import type { OpenStrategy } from './openStrategies'
 import type { SelectStrategy } from './selectStrategies'
 import type { ListItem } from '@/composables/list-items'
-import type { EventProp } from '@/util'
+import type { EventProp, ValueComparator } from '@/util'
 
 export type ActiveStrategyProp =
   | 'single-leaf'
@@ -153,10 +153,12 @@ export const useNested = (
     items,
     returnObject,
     scrollToActive,
+    valueComparator,
   }: {
     items: Ref<ListItem[]>
     returnObject: MaybeRefOrGetter<boolean>
     scrollToActive: MaybeRefOrGetter<boolean>
+    valueComparator?: MaybeRefOrGetter<ValueComparator | undefined>
   },
 ) => {
   let isUnmounted = false
@@ -212,18 +214,49 @@ export const useNested = (
     }
   })
 
+  const flatItems = computed(() => {
+    const flat: ListItem[] = []
+    const stack = [...items.value]
+    while (stack.length) {
+      const item = stack.pop()!
+      flat.push(item)
+      if (item.children) stack.push(...item.children)
+    }
+    return flat
+  })
+
+  function resolveValue (value: unknown): unknown {
+    const comparator = toValue(valueComparator)
+    if (!comparator) return value
+    const _returnObject = toValue(returnObject)
+    for (const item of flatItems.value) {
+      const itemVal = _returnObject ? toRaw(item.raw) : item.value
+      if (comparator(value, itemVal)) return itemVal
+    }
+    return value
+  }
+
   const activated = useProxiedModel(
     props,
     'activated',
     props.activated,
-    v => activeStrategy.value.in(v, children.value, parents.value),
+    v => activeStrategy.value.in(
+      Array.isArray(v) ? v.map(resolveValue) : v,
+      children.value,
+      parents.value,
+    ),
     v => activeStrategy.value.out(v, children.value, parents.value),
   )
   const selected = useProxiedModel(
     props,
     'selected',
     props.selected,
-    v => selectStrategy.value.in(v, children.value, parents.value, disabled.value),
+    v => selectStrategy.value.in(
+      Array.isArray(v) ? v.map(resolveValue) : v,
+      children.value,
+      parents.value,
+      disabled.value,
+    ),
     v => selectStrategy.value.out(v, children.value, parents.value),
   )