Skip to content

Commit

Permalink
Close quickshare dropdown on outside click
Browse files Browse the repository at this point in the history
If a user clicks anywhere outside of the quickshare dropdown,
it should be closed.

Signed-off-by: fenn-cs <[email protected]>
  • Loading branch information
nfebe committed Sep 4, 2023
1 parent 5c2eb3e commit c62ed9f
Showing 1 changed file with 13 additions and 1 deletion.
Original file line number Diff line number Diff line change
@@ -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" />
Expand Down Expand Up @@ -110,7 +110,12 @@ export default {
},
mounted() {
this.initializeComponent()
window.addEventListener('click', this.handleClickOutside);

Check failure on line 113 in apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue

View workflow job for this annotation

GitHub Actions / eslint

Extra semicolon
},
beforeDestroy() {
// Remove the global click event listener to prevent memory leaks

Check failure on line 116 in apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue

View workflow job for this annotation

GitHub Actions / eslint

Expected indentation of 2 tabs but found 4 spaces
window.removeEventListener('click', this.handleClickOutside);

Check failure on line 117 in apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue

View workflow job for this annotation

GitHub Actions / eslint

Expected indentation of 2 tabs but found 4 spaces

Check failure on line 117 in apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue

View workflow job for this annotation

GitHub Actions / eslint

Extra semicolon
},

Check failure on line 118 in apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue

View workflow job for this annotation

GitHub Actions / eslint

Expected indentation of 1 tab but found 4 spaces
methods: {
toggleDropdown() {
this.showDropdown = !this.showDropdown
Expand All @@ -128,6 +133,13 @@ export default {
initializeComponent() {
this.selectedOption = this.preSelectedOption
},
handleClickOutside(event) {
const dropdownElement = this.$refs.quickShareDropdown;

Check failure on line 137 in apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue

View workflow job for this annotation

GitHub Actions / eslint

Extra semicolon
if (dropdownElement && !dropdownElement.contains(event.target)) {
this.showDropdown = false;

Check failure on line 140 in apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue

View workflow job for this annotation

GitHub Actions / eslint

Extra semicolon
}
},

Check failure on line 142 in apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue

View workflow job for this annotation

GitHub Actions / eslint

Expected indentation of 2 tabs but found 7 spaces
},
}
Expand Down

0 comments on commit c62ed9f

Please sign in to comment.