Fix opening multiple popups

src/components/list/list-settings-dropdown.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="dropdown is-right is-active">
+	<div class="dropdown is-right is-active" ref="dropdown">
 		<div class="dropdown-trigger">
-			<icon icon="ellipsis-h" @click.stop="listSettingsOpen = !listSettingsOpen" class="icon"/>
+			<icon icon="ellipsis-h" @click="listSettingsOpen = !listSettingsOpen" class="icon"/>
 		</div>
 		<transition name="fade">
 			<div class="dropdown-menu" v-if="listSettingsOpen">
@@ -65,6 +65,7 @@
 </template>
 
 <script>
+import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 
 export default {
@@ -74,8 +75,11 @@ export default {
 			listSettingsOpen: false,
 		}
 	},
-	created() {
-		this.$nextTick(() => document.addEventListener('click', () => this.listSettingsOpen = false))
+	mounted() {
+		document.addEventListener('click', this.hide)
+	},
+	beforeDestroy() {
+		document.removeEventListener('click', this.hide)
 	},
 	props: {
 		list: {
@@ -103,5 +107,15 @@ export default {
 			return getSavedFilterIdFromListId(this.list.id) > 0
 		},
 	},
+	methods: {
+		hide(e) {
+			if (this.listSettingsOpen) {
+				console.log('hide', e)
+				closeWhenClickedOutside(e, this.$refs.dropdown, () => {
+					this.listSettingsOpen = false
+				})
+			}
+		},
+	},
 }
 </script>