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>

diff --git a/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue
index 8128b3925ee1cf5864f076f9edc366ddabd224c3..673038b620f432aa437b3d4eb5da750e2caaeb64 100644 (file)
--- 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;
+                       }
+       },
        },
 
 }