Enhanced styling collapsible list

src/components/Editor/Invitees/InviteesList.vue

@@ -231,6 +231,15 @@ export default {
 			})
 		},
 		removeAttendee(attendee) {
+			// Attendee is part of a group, therefore remove from group array
+			if (attendee.member) {
+				var groups = this.groups.filter(group => {
+					return group.uri === attendee.member
+				})
+				if (groups) {
+					console.log(groups)
+				}
+			}
 			this.$store.commit('removeAttendee', {
 				calendarObjectInstance: this.calendarObjectInstance,
 				attendee,

src/components/Editor/Invitees/InviteesListItem.vue

@@ -79,7 +79,7 @@
 					{{ $t('calendar', 'Non-participant') }}
 				</ActionRadio>
 
-				<ActionButton @click="removeAttendee">
+				<ActionButton @click="removeAttendee(attendee)">
 					<template #icon>
 						<Delete :size="20" decorative />
 					</template>
@@ -96,7 +96,7 @@
 				:is-read-only="isReadOnly"
 				:organizer-display-name="organizerDisplayName"
 				:members="member.members"
-				@remove-attendee="removeAttendee" />
+				@remove-attendee="removeAttendee(member)" />
 		</div>
 	</div>
 </template>
@@ -231,8 +231,8 @@ export default {
 		/**
 		 * Removes an attendee from the event
 		 */
-		removeAttendee() {
-			this.$emit('remove-attendee', this.attendee)
+		removeAttendee(attendee) {
+			this.$emit('remove-attendee', attendee)
 		},
 		/**
 		 * Toggle member list if attendee is a group
@@ -277,12 +277,15 @@ export default {
 	max-height: 0;
 	flex-basis: 100%;
 	overflow: hidden;
-	transition: max-height 0.3s ease;
-	padding-left: 15px;
+	transition: all 0.3s ease;
+	padding: 0;
+	opacity: 0;
 }
 
 .member-list--open {
 	max-height: 1000px;
-	transition: max-height 0.3s ease;
+	transition: all 0.3s ease;
+	padding: 0 0 10px 15px;
+	opacity: 1;
 }
 </style>