Close quickshare dropdown on outside click

If a user clicks anywhere outside of the quickshare dropdown,
it should be closed.

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>

1 files changed, 13 insertions, 1 deletions

diff --git a/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue
index 8128b3925ee..673038b620f 100644
--- a/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue
+++ b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="{ 'active': showDropdown, 'share-select': true }">
+	<div :class="{ 'active': showDropdown, 'share-select': true }" ref="quickShareDropdown">
 		<span class="trigger-text" @click="toggleDropdown">
 			{{ selectedOption }}
 			<DropdownIcon :size="15" />
@@ -110,7 +110,12 @@ export default {
 	},
 	mounted() {
 		this.initializeComponent()
+		window.addEventListener('click', this.handleClickOutside);
 	},
+	beforeDestroy() {
+    // Remove the global click event listener to prevent memory leaks
+    window.removeEventListener('click', this.handleClickOutside);
+    },
 	methods: {
 		toggleDropdown() {
 			this.showDropdown = !this.showDropdown
@@ -128,6 +133,13 @@ export default {
 		initializeComponent() {
 			this.selectedOption = this.preSelectedOption
 		},
+		handleClickOutside(event) {
+			const dropdownElement = this.$refs.quickShareDropdown;
+
+			if (dropdownElement && !dropdownElement.contains(event.target)) {
+				this.showDropdown = false;
+			}
+       },
 	},
 
 }