From 0dbc0d3b36e2f6af4cebdbdad38fea5776bbc6aa Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 4 May 2021 19:48:31 -0400
Subject: [PATCH] Default active list to null, remove self-toggle (#5470)

Fixes #5414
---
 app/src/components/v-list/v-list-group.vue | 4 ++--
 app/src/components/v-list/v-list.vue       | 3 ++-
 app/src/composables/groupable/groupable.ts | 5 +----
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/src/components/v-list/v-list-group.vue b/app/src/components/v-list/v-list-group.vue
index 42dc470342..d4824da667 100644
--- a/app/src/components/v-list/v-list-group.vue
+++ b/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" />
 
diff --git a/app/src/components/v-list/v-list.vue b/app/src/components/v-list/v-list.vue
index ff3186f051..89913928c8 100644
--- a/app/src/components/v-list/v-list.vue
+++ b/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,
diff --git a/app/src/composables/groupable/groupable.ts b/app/src/composables/groupable/groupable.ts
index ebd2a49dad..9b0e23f356 100644
--- a/app/src/composables/groupable/groupable.ts
+++ b/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])];
 			}
 		}