fix(nested): don't toggle disabled children

fixes #20386

Author: johnleider

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

@@ -39,6 +39,7 @@ export const makeVListGroupProps = propsFactory({
     type: IconValue,
     default: '$collapse',
   },
+  disabled: Boolean,
   expandIcon: {
     type: IconValue,
     default: '$expand',
@@ -60,7 +61,7 @@ export const VListGroup = genericComponent<VListGroupSlots>()({
   props: makeVListGroupProps(),
 
   setup (props, { slots }) {
-    const { isOpen, open, id: _id } = useNestedItem(toRef(props, 'value'), true)
+    const { isOpen, open, id: _id } = useNestedItem(toRef(props, 'value'), toRef(props, 'disabled'), true)
     const id = computed(() => `v-list-group--id-${String(_id.value)}`)
     const list = useList()
     const { isBooted } = useSsrBoot()

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

@@ -27,7 +27,7 @@ import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant
 import { Ripple } from '@/directives/ripple'
 
 // Utilities
-import { computed, onBeforeMount, watch } from 'vue'
+import { computed, onBeforeMount, toRef, watch } from 'vue'
 import { deprecate, EventProp, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
@@ -128,7 +128,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
       parent,
       openOnSelect,
       id: uid,
-    } = useNestedItem(id, false)
+    } = useNestedItem(id, toRef(props, 'disabled'), false)
     const list = useList()
     const isActive = computed(() =>
       props.active !== false &&

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

@@ -73,14 +73,15 @@ type NestedProvide = {
   isGroupActivator?: boolean
   root: {
     children: Ref<Map<unknown, unknown[]>>
+    disabled: Ref<Set<unknown>>
     parents: Ref<Map<unknown, unknown>>
     activatable: Ref<boolean>
     selectable: Ref<boolean>
     opened: Ref<Set<unknown>>
     activated: Ref<Set<unknown>>
     selected: Ref<Map<unknown, 'on' | 'off' | 'indeterminate'>>
     selectedValues: Ref<unknown[]>
-    register: (id: unknown, parentId: unknown, isGroup?: boolean) => void
+    register: (id: unknown, parentId: unknown, isDisabled: boolean, isGroup?: boolean) => void
     unregister: (id: unknown) => void
     open: (id: unknown, value: boolean, event?: Event) => void
     activate: (id: unknown, value: boolean, event?: Event) => void
@@ -99,6 +100,7 @@ export const emptyNested: NestedProvide = {
     unregister: () => null,
     parents: ref(new Map()),
     children: ref(new Map()),
+    disabled: ref(new Set()),
     open: () => null,
     openOnSelect: () => null,
     activate: () => null,
@@ -128,6 +130,7 @@ export const makeNestedProps = propsFactory({
 export const useNested = (props: NestedProps) => {
   let isUnmounted = false
   const children = ref(new Map<unknown, unknown[]>())
+  const disabled = ref(new Set<unknown>())
   const parents = ref(new Map<unknown, unknown>())
 
   const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()])
@@ -181,7 +184,7 @@ export const useNested = (props: NestedProps) => {
     props,
     'selected',
     props.selected,
-    v => selectStrategy.value.in(v, children.value, parents.value),
+    v => selectStrategy.value.in(v, children.value, disabled.value, parents.value),
     v => selectStrategy.value.out(v, children.value, parents.value),
   )
 
@@ -222,7 +225,7 @@ export const useNested = (props: NestedProps) => {
 
         return arr
       }),
-      register: (id, parentId, isGroup) => {
+      register: (id, parentId, isDisabled, isGroup) => {
         if (nodeIds.has(id)) {
           const path = getPath(id).map(String).join(' -> ')
           const newPath = getPath(parentId).concat(id).map(String).join(' -> ')
@@ -234,6 +237,7 @@ export const useNested = (props: NestedProps) => {
 
         parentId && id !== parentId && parents.value.set(id, parentId)
 
+        isDisabled && disabled.value.add(id)
         isGroup && children.value.set(id, [])
 
         if (parentId != null) {
@@ -245,6 +249,7 @@ export const useNested = (props: NestedProps) => {
 
         nodeIds.delete(id)
         children.value.delete(id)
+        disabled.value.delete(id)
         const parent = parents.value.get(id)
         if (parent) {
           const list = children.value.get(parent) ?? []
@@ -286,6 +291,7 @@ export const useNested = (props: NestedProps) => {
           value,
           selected: new Map(selected.value),
           children: children.value,
+          disabled: disabled.value,
           parents: parents.value,
           event,
         })
@@ -312,6 +318,7 @@ export const useNested = (props: NestedProps) => {
         newActivated && (activated.value = newActivated)
       },
       children,
+      disabled,
       parents,
       getPath,
     },
@@ -322,7 +329,7 @@ export const useNested = (props: NestedProps) => {
   return nested.root
 }
 
-export const useNestedItem = (id: Ref<unknown>, isGroup: boolean) => {
+export const useNestedItem = (id: Ref<unknown>, isDisabled: Ref<boolean>, isGroup: boolean) => {
   const parent = inject(VNestedSymbol, emptyNested)
 
   const uidSymbol = Symbol(getUid())
@@ -345,7 +352,7 @@ export const useNestedItem = (id: Ref<unknown>, isGroup: boolean) => {
   }
 
   onBeforeMount(() => {
-    !parent.isGroupActivator && parent.root.register(computedId.value, parent.id.value, isGroup)
+    !parent.isGroupActivator && parent.root.register(computedId.value, parent.id.value, isDisabled.value, isGroup)
   })
 
   onBeforeUnmount(() => {

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

@@ -7,13 +7,15 @@ export type SelectStrategyFn = (data: {
   value: boolean
   selected: Map<unknown, 'on' | 'off' | 'indeterminate'>
   children: Map<unknown, unknown[]>
+  disabled: Set<unknown>
   parents: Map<unknown, unknown>
   event?: Event
 }) => Map<unknown, 'on' | 'off' | 'indeterminate'>
 
 export type SelectStrategyTransformInFn = (
   v: readonly unknown[] | undefined,
   children: Map<unknown, unknown[]>,
+  disabled: Set<unknown>,
   parents: Map<unknown, unknown>,
 ) => Map<unknown, 'on' | 'off' | 'indeterminate'>
 
@@ -138,7 +140,7 @@ export const leafSingleSelectStrategy = (mandatory?: boolean): SelectStrategy =>
 
 export const classicSelectStrategy = (mandatory?: boolean): SelectStrategy => {
   const strategy: SelectStrategy = {
-    select: ({ id, value, selected, children, parents }) => {
+    select: ({ id, value, selected, children, disabled, parents }) => {
       id = toRaw(id)
       const original = new Map(selected)
 
@@ -147,7 +149,9 @@ export const classicSelectStrategy = (mandatory?: boolean): SelectStrategy => {
       while (items.length) {
         const item = items.shift()!
 
-        selected.set(toRaw(item), value ? 'on' : 'off')
+        if (!disabled.has(item)) {
+          selected.set(toRaw(item), value ? 'on' : 'off')
+        }
 
         if (children.has(item)) {
           items.push(...children.get(item)!)
@@ -157,9 +161,17 @@ export const classicSelectStrategy = (mandatory?: boolean): SelectStrategy => {
       let parent = toRaw(parents.get(id))
 
       while (parent) {
-        const childrenIds = children.get(parent)!
-        const everySelected = childrenIds.every(cid => selected.get(toRaw(cid)) === 'on')
-        const noneSelected = childrenIds.every(cid => !selected.has(toRaw(cid)) || selected.get(toRaw(cid)) === 'off')
+        let everySelected = true
+        let noneSelected = true
+
+        for (const child of children.get(parent)!) {
+          const cid = toRaw(child)
+
+          if (disabled.has(cid)) continue
+          if (selected.get(cid) !== 'on') everySelected = false
+          if (selected.get(cid) !== 'off') noneSelected = false
+          if (!everySelected && !noneSelected) break
+        }
 
         selected.set(parent, everySelected ? 'on' : noneSelected ? 'off' : 'indeterminate')
 
@@ -179,7 +191,7 @@ export const classicSelectStrategy = (mandatory?: boolean): SelectStrategy => {
 
       return selected
     },
-    in: (v, children, parents) => {
+    in: (v, children, disabled, parents) => {
       let map = new Map()
 
       for (const id of (v || [])) {
@@ -188,6 +200,7 @@ export const classicSelectStrategy = (mandatory?: boolean): SelectStrategy => {
           value: true,
           selected: map,
           children,
+          disabled,
           parents,
         })
       }