From 87c487e6bb4d40aff92f8877f5e93e7b38f8ebdc Mon Sep 17 00:00:00 2001
From: fenn-cs <fenn25.fn@gmail.com>
Date: Mon, 4 Sep 2023 23:43:53 +0100
Subject: [PATCH] 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>
---
 .../components/SharingEntryQuickShareSelect.vue    | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue
index 8128b3925ee1c..673038b620f43 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;
+			}
+       },
 	},
 
 }