fix(VTreeview): open nodes when searching

[J-Sek]

fixes #22035
fixes #22392

• open nodes when searching
  • collapse only what was temporarily opened
  • accept expand/collapse (opened changes) mid-search
• prevent re-opening nodes after irrelevant small changes to items
• accept collapsing when open-all and v-model:opened

Markup:

<template>
  <v-app theme="dark">
    <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-checkbox-btn
          v-model="caseSensitive"
          label="Case sensitive search"
        />
      </v-sheet>

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

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

  const items = ref([
    {
      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])
  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
  }

  onMounted(() => {
    setTimeout(() => {
      items.value[0].children[1].children.push({ id: 30003, title: 'TEST 2', children: [{ id: 30004, title: 'Child 2.1' }] })
    }, 3000)
  })
</script>