From dbba43efd933f8d15bc6fb562a868eff03ef2200 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Fri, 10 Sep 2021 01:57:03 +0800
Subject: [PATCH] Allow v-menu tooltip to stay active on hover (#7948)

* allow v-menu tooltip to stay active on hover

* remove overlooked code in previous commit
---
 app/src/components/v-menu/v-menu.vue | 37 +++++++++++++++++-----------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/app/src/components/v-menu/v-menu.vue b/app/src/components/v-menu/v-menu.vue
index 8a526e8909..21499158ec 100644
--- a/app/src/components/v-menu/v-menu.vue
+++ b/app/src/components/v-menu/v-menu.vue
@@ -4,8 +4,8 @@
 			ref="activator"
 			class="v-menu-activator"
 			:class="{ attached }"
-			@pointerenter="onPointerEnter"
-			@pointerleave="onPointerLeave"
+			@pointerenter.stop="onPointerEnter"
+			@pointerleave.stop="onPointerLeave"
 		>
 			<slot
 				name="activator"
@@ -36,7 +36,12 @@
 					:style="styles"
 				>
 					<div class="arrow" :class="{ active: showArrow && isActive }" :style="arrowStyles" data-popper-arrow />
-					<div class="v-menu-content" @click.stop="onContentClick">
+					<div
+						class="v-menu-content"
+						@click.stop="onContentClick"
+						@pointerenter.stop="onPointerEnter"
+						@pointerleave.stop="onPointerLeave"
+					>
 						<slot
 							v-bind="{
 								toggle: toggle,
@@ -57,6 +62,7 @@ import { defineComponent, ref, PropType, computed, watch, nextTick } from 'vue';
 import { usePopper } from './use-popper';
 import { Placement } from '@popperjs/core';
 import { nanoid } from 'nanoid';
+import { debounce } from 'lodash';
 
 export default defineComponent({
 	props: {
@@ -241,7 +247,18 @@ export default defineComponent({
 		}
 
 		function useEvents() {
-			let timeout: ReturnType<typeof setTimeout> | null = null;
+			const isHovered = ref(false);
+
+			watch(
+				isHovered,
+				debounce((newHoveredState) => {
+					if (newHoveredState) {
+						if (!isActive.value) activate();
+					} else {
+						deactivate();
+					}
+				}, props.delay)
+			);
 
 			return { onClick, onPointerLeave, onPointerEnter };
 
@@ -253,20 +270,12 @@ export default defineComponent({
 
 			function onPointerEnter() {
 				if (props.trigger !== 'hover') return;
-				if (timeout) return;
-				timeout = setTimeout(() => {
-					activate();
-				}, props.delay);
+				isHovered.value = true;
 			}
 
 			function onPointerLeave() {
-				if (hoveringOnPopperContent.value === true) return;
-
 				if (props.trigger !== 'hover') return;
-				if (timeout === null) return;
-				clearTimeout(timeout);
-				deactivate();
-				timeout = null;
+				isHovered.value = false;
 			}
 		}
 	},