using the openSelection variable to manage the open groups (#13752)

app/src/components/v-checkbox-tree/v-checkbox-tree-checkbox.vue

@@ -1,11 +1,5 @@
 <template>
-	<v-list-group
-		v-if="visibleChildrenValues.length > 0"
-		v-show="groupShown"
-		:value="value"
-		:open="groupOpen"
-		arrow-placement="before"
-	>
+	<v-list-group v-if="visibleChildrenValues.length > 0" v-show="groupShown" :value="value" arrow-placement="before">
 		<template #activator>
 			<v-checkbox
 				v-model="treeValue"
@@ -141,14 +135,6 @@ export default defineComponent({
 			return !props.hidden;
 		});
 
-		const groupOpen = computed(() => {
-			if (props.showSelectionOnly === true) {
-				return visibleChildrenValues.value.length > 0;
-			}
-
-			return false;
-		});
-
 		const childrenValues = computed(() => props.children?.map((child) => child[props.itemValue]) || []);
 
 		const treeValue = computed({
@@ -242,7 +228,6 @@ export default defineComponent({
 			groupIndeterminateState,
 			visibleChildrenValues,
 			groupShown,
-			groupOpen,
 		};
 
 		function emitAll(rawValue: (string | number)[], { added, removed }: Delta) {

app/src/components/v-checkbox-tree/v-checkbox-tree.vue

@@ -93,6 +93,7 @@ export default defineComponent({
 			fakeValue
 		);
 
+		let showAllSelection: (string | number)[] = [];
 		const openSelection = ref<(string | number)[]>([]);
 
 		watch(
@@ -107,6 +108,17 @@ export default defineComponent({
 			{ immediate: true }
 		);
 
+		watch(showSelectionOnly, (isSelectionOnly) => {
+			if (isSelectionOnly) {
+				const selection = new Set([...openSelection.value, ...findSelectedChoices(props.choices, value.value)]);
+
+				showAllSelection = openSelection.value;
+				openSelection.value = [...selection];
+			} else {
+				openSelection.value = [...showAllSelection];
+			}
+		});
+
 		function searchChoices(text: string, target: Record<string, any>[]) {
 			const selection: string[] = [];
 
@@ -123,6 +135,29 @@ export default defineComponent({
 			return selection;
 		}
 
+		function findSelectedChoices(choices: Record<string, any>[], checked: (string | number)[]) {
+			function selectedChoices(item: Record<string, any>): (string | number)[] {
+				if (!item[props.itemValue]) return [];
+				let result = [];
+
+				const itemValue: string | number = item[props.itemValue];
+				if (checked.includes(itemValue)) result.push(itemValue);
+
+				if (item[props.itemChildren]) {
+					const children = item[props.itemChildren];
+					if (Array.isArray(children) && children.length > 0) {
+						const nestedResult = children.flatMap((child) => selectedChoices(child));
+						if (nestedResult.length > 0) {
+							result.push(...nestedResult, itemValue);
+						}
+					}
+				}
+				return result;
+			}
+
+			return choices.flatMap((item) => selectedChoices(item));
+		}
+
 		return { value, openSelection, visibleChildrenValues };
 	},
 });