From dbe4d319a9eae88fcb15b744a2fb76caa9e671fe Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Fri, 22 May 2020 11:36:51 -0400
Subject: [PATCH] Fix project chooser not closing on click (#611)

---
 .../project-chooser/project-chooser.vue       | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/views/private/components/project-chooser/project-chooser.vue b/src/views/private/components/project-chooser/project-chooser.vue
index 827e9d7fe9..1c85ba225a 100644
--- a/src/views/private/components/project-chooser/project-chooser.vue
+++ b/src/views/private/components/project-chooser/project-chooser.vue
@@ -1,12 +1,24 @@
 <template>
 	<div class="project-chooser" :class="{ active }">
-		<button class="toggle" :disabled="projects.length === 1" @click="active = !active">
+		<button
+			ref="activator"
+			class="toggle"
+			:disabled="projects.length === 1"
+			@click="active = !active"
+		>
 			<latency-indicator />
 			<span class="name">{{ currentProject.name }}</span>
 			<v-icon class="icon" name="expand_more" />
 		</button>
 		<transition-expand>
-			<div v-if="active" class="options-wrapper" v-click-outside="() => (active = false)">
+			<div
+				v-if="active"
+				class="options-wrapper"
+				v-click-outside="{
+					handler: () => (active = false),
+					middleware: onClickOutsideMiddleware,
+				}"
+			>
 				<div class="options">
 					<v-divider />
 
@@ -40,6 +52,7 @@ export default defineComponent({
 		const projectsStore = useProjectsStore();
 		const { currentProjectKey } = toRefs(projectsStore.state);
 		const active = ref(false);
+		const activator = ref<Element>(null);
 
 		const currentProject = projectsStore.currentProject;
 
@@ -50,8 +63,14 @@ export default defineComponent({
 			projectsStore,
 			currentProject,
 			active,
+			onClickOutsideMiddleware,
+			activator,
 		};
 
+		function onClickOutsideMiddleware(event: Event) {
+			return !activator.value?.contains(event.target as Node);
+		}
+
 		function navigateToProject(key: string) {
 			router
 				.push(`/${key}/collections`)