diff options
| author | fenn-cs <fenn25.fn@gmail.com> | 2023-09-04 23:43:53 +0100 |
|---|---|---|
| committer | Arthur Schiwon <blizzz@arthur-schiwon.de> | 2023-09-07 15:17:50 +0200 |
| commit | 8fab35475f1360c7ce321376ce1b159cbfb3a5af (patch) | |
| tree | d17750e9d3a48fc4ccd1e5d8f2ccb1584a4d8e65 /apps | |
| parent | c22c9c917bb465d9e44324e947af0dac5c5a44ee (diff) | |
| download | nextcloud-server-8fab35475f1360c7ce321376ce1b159cbfb3a5af.tar.gz nextcloud-server-8fab35475f1360c7ce321376ce1b159cbfb3a5af.zip | |
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>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue | 14 |
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; + } + }, }, } |