fix(VTreeview): automatically expand filtered items' ancestors

[prestonyford]

fixes #22035
When searching a VTreeView, automatically expands the ancestors of filtered items.

Description

I used a watcher to watch when the filtered items change. I find the path of all filtered items and emit update:opened to include those so that they are opened in addition to the filtered items.

Markup:

<template>
  <div>
    opened: {{ openedTitles }}
  </div>
  <v-card class="mx-auto" max-width="500">
    <v-sheet class="pa-4" color="surface-variant">
      <v-text-field v-model="search" clear-icon="mdi-close-circle-outline" label="Search Company Directory"
        variant="solo" clearable flat hide-details></v-text-field>

      <v-checkbox-btn v-model="caseSensitive" label="Case sensitive search"></v-checkbox-btn>
    </v-sheet>

    <v-treeview v-model:opened="open" :custom-filter="filter" :items="items" :search="search" item-value="id"
      open-on-click>
      <template v-slot:prepend="{ item }">
        <v-icon v-if="item.children" :icon="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"></v-icon>
      </template>
    </v-treeview>
  </v-card>
</template>

<script setup>
import { shallowRef, computed } from 'vue'

const items = [
  {
    id: 1,
    title: 'Vuetify Human Resources',
    children: [
      {
        id: 2,
        title: 'Core team',
        children: [
          {
            id: 20001,
            title: 'John',
            children: [
              {
                id: 30001,
                title: 'TEST 1',
              },
              {
                id: 30002,
                title: 'TEST 2',
              },
            ],
          },
          {
            id: 202,
            title: 'Kael',
          },
          {
            id: 203,
            title: 'Nekosaur',
          },
          {
            id: 204,
            title: 'Jacek',
          },
          {
            id: 205,
            title: 'Andrew',
          },
        ],
      },
      {
        id: 3,
        title: 'Administrators',
        children: [
          {
            id: 301,
            title: 'Blaine',
          },
          {
            id: 302,
            title: 'Yuchao',
          },
        ],
      },
      {
        id: 4,
        title: 'Contributors',
        children: [
          {
            id: 401,
            title: 'Phlow',
          },
          {
            id: 402,
            title: 'Brandon',
          },
          {
            id: 403,
            title: 'Sean',
          },
        ],
      },
    ],
  },
]

const open = shallowRef([1, 2])
const search = shallowRef(null)
const caseSensitive = shallowRef(false)

function filter(value, search, item) {
  return caseSensitive.value ? value.indexOf(search) > -1 : value.toLowerCase().indexOf(search.toLowerCase()) > -1
}


function findById(items, id) {
  for (const item of items) {
    if (item.id === id) return item;

    if (item.children) {
      const found = findById(item.children, id);
      if (found) return found;
    }
  }

  return null;
}

const openedTitles = computed(() => {
  return open.value.map(id => findById(items, id)?.title ?? '??')
})

</script>

[J-Sek]

The direction seems good, but there are some shortcomings

• breaks when opened is null or undefined
• should not require v-model:opened to work
• probably missing toRaw
• should it auto-collapse the tree when search is cleared?

[J-Sek]

closing in favor of #22983