fix(nested): react to items changes

fixes #21733

Author: J-Sek

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

@@ -31,7 +31,7 @@ import {
   leafSingleSelectStrategy,
   trunkSelectStrategy,
 } from './selectStrategies'
-import { consoleError, getCurrentInstance, propsFactory } from '@/util'
+import { consoleError, getCurrentInstance, propsFactory, throttle } from '@/util'
 
 // Types
 import type { InjectionKey, MaybeRefOrGetter, PropType, Ref } from 'vue'
@@ -220,6 +220,11 @@ export const useNested = (props: NestedProps) => {
 
   const nodeIds = new Set<unknown>()
 
+  const itemsUpdatePropagation = throttle(() => {
+    children.value = new Map(children.value)
+    parents.value = new Map(parents.value)
+  }, 100)
+
   const nested: NestedProvide = {
     id: shallowRef(),
     root: {
@@ -255,6 +260,7 @@ export const useNested = (props: NestedProps) => {
         if (parentId != null) {
           children.value.set(parentId, [...children.value.get(parentId) || [], id])
         }
+        itemsUpdatePropagation()
       },
       unregister: id => {
         if (isUnmounted) return
@@ -268,6 +274,7 @@ export const useNested = (props: NestedProps) => {
           children.value.set(parent, list.filter(child => child !== id))
         }
         parents.value.delete(id)
+        itemsUpdatePropagation()
       },
       open: (id, value, event) => {
         vm.emit('click:open', { id, value, path: getPath(id), event })

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

@@ -193,6 +193,7 @@ export const classicSelectStrategy = (mandatory?: boolean): SelectStrategy => {
       return selected
     },
     in: (v, children, parents, disabled) => {
+      console.log('classicSelectStrategy:in', parents.size, children.size)
       let map = new Map()
 
       for (const id of (v || [])) {

packages/vuetify/src/util/helpers.ts

@@ -419,15 +419,37 @@ export function debounce (fn: Function, delay: MaybeRef<number>) {
   return wrap
 }
 
-export function throttle<T extends (...args: any[]) => any> (fn: T, limit: number) {
+export function throttle<T extends (...args: any[]) => any> (
+  fn: T,
+  delay: number,
+  options = { leading: false, trailing: true },
+) {
+  let timeoutId = 0
+  let lastExec = 0
   let throttling = false
-  return (...args: Parameters<T>): void | ReturnType<T> => {
-    if (!throttling) {
-      throttling = true
-      setTimeout(() => throttling = false, limit)
-      return fn(...args)
+
+  const wrap = (...args: Parameters<T>): void | ReturnType<T> => {
+    clearTimeout(timeoutId)
+    const now = Date.now()
+    const elapsed = now - lastExec
+
+    if ((!throttling && options.leading) || elapsed >= delay) {
+      lastExec = now
+      window.setTimeout(() => fn(...args)) // ignore 'fn' executin errors
     }
+
+    throttling = true
+    timeoutId = window.setTimeout(() => {
+      throttling = false
+      if (options.trailing) {
+        fn(...args)
+      }
+    }, delay)
   }
+
+  wrap.clear = () => clearTimeout(timeoutId)
+  wrap.immediate = fn
+  return wrap
 }
 
 export function clamp (value: number, min = 0, max = 1) {