From d3ba3a42469b02a763cef560250b0ecef2d45fbe Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Wed, 22 Sep 2021 07:15:30 +0800
Subject: [PATCH] Ensure menus closes when another one gets opened (#7962)

* ensure menus closes when another one gets opened

* revert focusout event for v-menu

* change field-select and only make labels clickable

* change v-click-outside to pointerdown event

* Remove default behavior

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 app/src/components/v-menu/v-menu.vue          |  1 -
 .../fields/components/field-select-menu.vue   |  2 +-
 .../fields/components/field-select.vue        | 57 ++++++++++++-------
 3 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/app/src/components/v-menu/v-menu.vue b/app/src/components/v-menu/v-menu.vue
index 21499158ec..92e02b716b 100644
--- a/app/src/components/v-menu/v-menu.vue
+++ b/app/src/components/v-menu/v-menu.vue
@@ -28,7 +28,6 @@
 						handler: deactivate,
 						middleware: onClickOutsideMiddleware,
 						disabled: isActive === false || closeOnClick === false,
-						events: ['click'],
 					}"
 					class="v-menu-popper"
 					:class="{ active: isActive, attached }"
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue
index a96cde9816..eb9cb8ed81 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue
@@ -1,7 +1,7 @@
 <template>
 	<v-menu show-arrow placement="bottom-end">
 		<template #activator="{ toggle }">
-			<v-icon clickable name="more_vert" @click.stop="toggle" />
+			<v-icon clickable name="more_vert" @click="toggle" />
 		</template>
 
 		<v-list>
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index f6e1cc1730..bbd17ab363 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -48,19 +48,25 @@
 				</template>
 			</draggable>
 
-			<v-input v-else class="field" :class="{ hidden }" readonly clickable @click="openFieldDetail">
+			<v-input v-else class="field" :class="{ hidden }" readonly>
 				<template #prepend>
 					<v-icon class="drag-handle" name="drag_indicator" @click.stop />
 				</template>
 
 				<template #input>
-					<div v-tooltip="interfaceName ? `${field.name} (${interfaceName})` : field.name" class="label">
-						<span class="name">
-							{{ field.field }}
-							<v-icon v-if="field.meta?.required === true" name="star" class="required" sup />
-						</span>
-						<span v-if="field.meta" class="interface">{{ interfaceName }}</span>
-						<span v-else class="interface">{{ t('db_only_click_to_configure') }}</span>
+					<div
+						v-tooltip="interfaceName ? `${field.name} (${interfaceName})` : field.name"
+						class="label"
+						@click="openFieldDetail"
+					>
+						<div class="label-inner">
+							<span class="name">
+								{{ field.field }}
+								<v-icon v-if="field.meta?.required === true" name="star" class="required" sup />
+							</span>
+							<span v-if="field.meta" class="interface">{{ interfaceName }}</span>
+							<span v-else class="interface">{{ t('db_only_click_to_configure') }}</span>
+						</div>
 					</div>
 				</template>
 
@@ -456,24 +462,33 @@ export default defineComponent({
 	}
 
 	.label {
+		display: flex;
 		flex-grow: 1;
+		align-items: center;
+		align-self: stretch;
 		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
+		cursor: pointer;
 
-		.name {
-			font-family: var(--family-monospace);
-		}
+		.label-inner {
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
 
-		.interface {
-			display: none;
-			color: var(--foreground-subdued);
-			font-family: var(--family-monospace);
-			opacity: 0;
-			transition: opacity var(--fast) var(--transition);
+			.name {
+				margin-right: 12px;
+				font-family: var(--family-monospace);
+			}
 
-			@media (min-width: 600px) {
-				display: initial;
+			.interface {
+				display: none;
+				color: var(--foreground-subdued);
+				font-family: var(--family-monospace);
+				opacity: 0;
+				transition: opacity var(--fast) var(--transition);
+
+				@media (min-width: 600px) {
+					display: initial;
+				}
 			}
 		}
 	}