From eda01193203b6ff7a2674eb75ed37dc256dc388d Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Wed, 25 Sep 2024 10:57:47 +0200
Subject: [PATCH] fix(member): close actions menu when scrolling members

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/Member/Member.vue       | 15 +++++++++++++++
 src/components/Member/MemberPicker.vue | 13 ++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/Member/Member.vue b/src/components/Member/Member.vue
index 85e82b3b2..0790b1396 100644
--- a/src/components/Member/Member.vue
+++ b/src/components/Member/Member.vue
@@ -41,6 +41,7 @@
 		<!-- Action menu -->
 		<NcActions v-else-if="currentUserIsAdmin && !isSearched && !isCurrentUser"
 			:force-menu="true"
+			:open.sync="showActionMenu"
 			class="member-row__actions">
 			<NcActionButton v-if="!isAdmin"
 				:close-after-click="true"
@@ -83,6 +84,7 @@
 import { mapActions } from 'pinia'
 import { useCirclesStore } from '../../stores/circles.js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { circlesMemberTypes, memberLevels } from '../../constants.js'
 import { NcActions, NcActionButton, NcActionSeparator, NcAvatar, NcLoadingIcon } from '@nextcloud/vue'
 import AccountCogIcon from 'vue-material-design-icons/AccountCog.vue'
@@ -156,6 +158,7 @@ export default {
 
 	data() {
 		return {
+			showActionMenu: false,
 			isLoadingLevel: false,
 			memberLevels,
 		}
@@ -206,6 +209,14 @@ export default {
 		},
 	},
 
+	mounted() {
+		subscribe('collectives:member-picker:scroll', this.closeMenu)
+	},
+
+	unmounted() {
+		unsubscribe('collectives:member-picker:scroll', this.closeMenu)
+	},
+
 	methods: {
 		...mapActions(useCirclesStore, [
 			'getCircleMembers',
@@ -251,6 +262,10 @@ export default {
 				this.$emit('click')
 			}
 		},
+
+		closeMenu() {
+			this.showActionMenu = false
+		},
 	},
 }
 </script>
diff --git a/src/components/Member/MemberPicker.vue b/src/components/Member/MemberPicker.vue
index 96e5fd373..dd3400f14 100644
--- a/src/components/Member/MemberPicker.vue
+++ b/src/components/Member/MemberPicker.vue
@@ -16,7 +16,7 @@
 			<MagnifyIcon :size="16" />
 		</NcTextField>
 
-		<div class="member-picker-list">
+		<div ref="memberPickerList" class="member-picker-list">
 			<!-- Current members (optional) -->
 			<SkeletonLoading v-if="showCurrentSkeleton" type="members-list" :count="3" />
 			<CurrentMembers v-else-if="showCurrent"
@@ -54,6 +54,7 @@ import { mapState } from 'pinia'
 import { useCirclesStore } from '../../stores/circles.js'
 import axios from '@nextcloud/axios'
 import debounce from 'debounce'
+import { emit } from '@nextcloud/event-bus'
 import { autocompleteSourcesToCircleMemberTypes, circlesMemberTypes, shareTypes } from '../../constants.js'
 import { generateOcsUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
@@ -132,6 +133,7 @@ export default {
 			searchResults: [],
 			isSearchLoading: false,
 			fetchSearchResultsDebounced: debounce(this.fetchSearchResults, 250),
+			onScrollDebounced: debounce(this.onScroll, 1000, { immediate: true }),
 		}
 	},
 
@@ -162,6 +164,11 @@ export default {
 		if (this.searchWithoutQuery) {
 			this.fetchSearchResultsDebounced()
 		}
+		this.$refs.memberPickerList.addEventListener('scroll', this.onScrollDebounced)
+	},
+
+	unmounted() {
+		this.$refs.memberPickerList.removeEventListener('scroll', this.onScrollDebounced)
 	},
 
 	methods: {
@@ -217,6 +224,10 @@ export default {
 				this.fetchSearchResultsDebounced()
 			}
 		},
+
+		onScroll() {
+			emit('collectives:member-picker:scroll')
+		},
 	},
 }
 </script>