From 333d93b9892ebf71d43ed8d066288d23ba91b16a Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Tue, 18 Jan 2022 03:39:53 +0800
Subject: [PATCH] fix collection options menu clicks (#11084)

---
 .../data-model/collections/components/collection-item.vue     | 3 ++-
 .../data-model/collections/components/collection-options.vue  | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue b/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue
index fd5af46e1c..98f1b22481 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue
@@ -6,7 +6,7 @@
 			clickable
 			:class="{ hidden: collection.meta?.hidden }"
 			:to="collection.schema ? `/settings/data-model/${collection.collection}` : undefined"
-			@click="!collection.schema ? $emit('editCollection', collection) : null"
+			@click.self="!collection.schema ? $emit('editCollection', collection) : null"
 		>
 			<v-list-item-icon>
 				<v-icon v-if="!disableDrag" class="drag-handle" name="drag_handle" />
@@ -185,6 +185,7 @@ export default defineComponent({
 	align-items: center;
 	height: 100%;
 	font-family: var(--family-monospace);
+	pointer-events: none;
 }
 
 .collection-icon {
diff --git a/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue b/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
index c3d83bf65d..05ede91445 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
@@ -1,8 +1,8 @@
 <template>
 	<div v-if="collection.collection.startsWith('directus_') === false">
 		<v-menu placement="left-start" show-arrow>
-			<template #activator="{ toggle, deactivate }">
-				<v-icon name="more_vert" clickable class="ctx-toggle" @click.stop.prevent="toggle" @focusout="deactivate" />
+			<template #activator="{ toggle }">
+				<v-icon name="more_vert" clickable class="ctx-toggle" @click.prevent="toggle" />
 			</template>
 			<v-list>
 				<v-list-item clickable class="danger" @click="deleteActive = true">