Default active list to null, remove self-toggle (#5470)

Fixes #5414

app/src/components/v-list/v-list-group.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="v-list-group">
 		<v-list-item
-			:active="active"
 			class="activator"
+			:active="active"
 			:to="to"
 			:exact="exact"
-			@click="onClick"
 			:disabled="disabled"
 			:dense="dense"
+			@click="onClick"
 		>
 			<slot name="activator" :active="groupActive" />
 

app/src/components/v-list/v-list.vue

@@ -16,7 +16,7 @@ export default defineComponent({
 	props: {
 		activeItems: {
 			type: Array as PropType<(number | string)[]>,
-			default: () => [],
+			default: null,
 		},
 		large: {
 			type: Boolean,
@@ -33,6 +33,7 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const { activeItems, multiple, mandatory } = toRefs(props);
+
 		useGroupableParent(
 			{
 				selection: activeItems,

app/src/composables/groupable/groupable.ts

@@ -74,16 +74,13 @@ export function useGroupable(options?: GroupableOptions): Record<string, any> {
 	return {
 		active,
 		toggle: () => {
-			active.value = !active.value;
 			toggle(item);
 		},
 		activate: () => {
 			if (active.value === false) toggle(item);
-			active.value = true;
 		},
 		deactivate: () => {
 			if (active.value === true) toggle(item);
-			active.value = false;
 		},
 	};
 }
@@ -152,7 +149,7 @@ export function useGroupableParent(
 			if (isEqual(newValue, oldValue)) return;
 
 			// If you're required to select a value, make sure a value is selected on first render
-			if (selection.value.length === 0 && options?.mandatory?.value === true) {
+			if (!selection.value || (selection.value.length === 0 && options?.mandatory?.value === true)) {
 				selection.value = [getValueForItem(items.value[0])];
 			}
 		}