From 98c20dbf3cafdea6b484881507280e32462bc834 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 23 Sep 2020 14:08:06 +0300
Subject: [PATCH] Fixed overlay menus

---
 src/components/contextmenu/ContextMenu.vue | 31 +++++++++++++---------
 src/components/menu/Menu.vue               | 25 ++++++++++-------
 src/components/tieredmenu/TieredMenu.vue   | 23 +++++++++-------
 3 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/components/contextmenu/ContextMenu.vue b/src/components/contextmenu/ContextMenu.vue
index 302cb991b..0e23c4641 100755
--- a/src/components/contextmenu/ContextMenu.vue
+++ b/src/components/contextmenu/ContextMenu.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="p-contextmenu" @enter="onEnter" @leave="onLeave">
-        <div ref="container" class="p-contextmenu p-component" v-if="visible">
+        <div :ref="containerRef" class="p-contextmenu p-component" v-if="visible">
             <ContextMenuSub :model="model" :root="true" @leaf-click="onLeafClick" />
         </div>
     </transition>
@@ -39,6 +39,7 @@ export default {
     documentContextMenuListener: null,
     pageX: null,
     pageY: null,
+    container: null,
     data() {
         return {
             visible: false
@@ -49,6 +50,7 @@ export default {
         this.unbindResizeListener();
         this.unbindOutsideClickListener();
         this.unbindDocumentContextMenuListener();
+        this.container = null;
     },
     mounted() {
         if (this.global) {
@@ -95,7 +97,7 @@ export default {
             this.bindResizeListener();
 
             if (this.autoZIndex) {
-                this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+                this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             }
         },
         onLeave() {
@@ -105,8 +107,8 @@ export default {
         position() {
             let left = this.pageX + 1;
             let top = this.pageY + 1;
-            let width = this.$refs.container.offsetParent ? this.$refs.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$refs.container);
-            let height = this.$refs.container.offsetParent ? this.$refs.container.offsetHeight : DomHandler.getHiddenElementOuterHeight(this.$refs.container);
+            let width = this.container.offsetParent ? this.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.container);
+            let height = this.container.offsetParent ? this.container.offsetHeight : DomHandler.getHiddenElementOuterHeight(this.container);
             let viewport = DomHandler.getViewport();
 
             //flip
@@ -129,13 +131,13 @@ export default {
                 top = document.body.scrollTop;
             }
 
-            this.$refs.container.style.left = left + 'px';
-            this.$refs.container.style.top = top + 'px';
+            this.container.style.left = left + 'px';
+            this.container.style.top = top + 'px';
         },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
-                    if (this.visible && this.$refs.container && !this.$refs.container.contains(event.target)) {
+                    if (this.visible && this.container && !this.container.contains(event.target)) {
                         this.hide();
                     }
                 };
@@ -167,17 +169,17 @@ export default {
         appendContainer() {
             if (this.appendTo) {
                 if (this.appendTo === 'body')
-                    document.body.appendChild(this.$refs.container);
+                    document.body.appendChild(this.container);
                 else
-                    document.getElementById(this.appendTo).appendChild(this.$refs.container);
+                    document.getElementById(this.appendTo).appendChild(this.container);
             }
         },
         restoreAppend() {
-            if (this.$refs.container && this.appendTo) {
+            if (this.container && this.appendTo) {
                 if (this.appendTo === 'body')
-                    document.body.removeChild(this.$refs.container);
+                    document.body.removeChild(this.container);
                 else
-                    document.getElementById(this.appendTo).removeChild(this.$refs.container);
+                    document.getElementById(this.appendTo).removeChild(this.container);
             }
         },
         bindDocumentContextMenuListener() {
@@ -194,6 +196,9 @@ export default {
                 document.removeEventListener('contextmenu', this.documentContextMenuListener);
                 this.documentContextMenuListener = null;
             }
+        },
+        containerRef(el) {
+            this.container = el;
         }
     },
     components: {
@@ -240,7 +245,7 @@ export default {
     margin-left: auto;
 }
 
-.p-contextmenu-enter {
+.p-contextmenu-enter-from {
     opacity: 0;
 }
 
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index 9ffc27c98..2866f833b 100755
--- a/src/components/menu/Menu.vue
+++ b/src/components/menu/Menu.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
-        <div ref="container" :class="containerClass" v-if="popup ? overlayVisible : true">
+        <div :ref="containerRef" :class="containerClass" v-if="popup ? overlayVisible : true">
             <ul class="p-menu-list p-reset" role="menu">
                 <template v-for="(item, i) of model">
                     <template v-if="item.items && visible(item) && !item.separator">
@@ -54,6 +54,7 @@ export default {
     outsideClickListener: null,
     resizeListener: null,
     relativeAlign: false,
+    container: null,
     beforeUnmount() {
         this.restoreAppend();
         this.unbindResizeListener();
@@ -96,7 +97,7 @@ export default {
             this.bindResizeListener();
 
             if (this.autoZIndex) {
-                this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+                this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             }
         },
         onLeave() {
@@ -105,15 +106,15 @@ export default {
         },
         alignOverlay() {
             if (this.relativeAlign)
-                DomHandler.relativePosition(this.$refs.container, this.target);
+                DomHandler.relativePosition(this.container, this.target);
             else
-                DomHandler.absolutePosition(this.$refs.container, this.target);
+                DomHandler.absolutePosition(this.container, this.target);
 
         },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
-                    if (this.overlayVisible && this.$refs.container && !this.$refs.container.contains(event.target) && !this.isTargetClicked(event)) {
+                    if (this.overlayVisible && this.container && !this.container.contains(event.target) && !this.isTargetClicked(event)) {
                         this.hide();
                     }
                 };
@@ -148,17 +149,17 @@ export default {
         appendContainer() {
             if (this.appendTo) {
                 if (this.appendTo === 'body')
-                    document.body.appendChild(this.$refs.container);
+                    document.body.appendChild(this.container);
                 else
-                    document.getElementById(this.appendTo).appendChild(this.$refs.container);
+                    document.getElementById(this.appendTo).appendChild(this.container);
             }
         },
         restoreAppend() {
-            if (this.$refs.container && this.appendTo) {
+            if (this.container && this.appendTo) {
                 if (this.appendTo === 'body')
-                    document.body.removeChild(this.$refs.container);
+                    document.body.removeChild(this.container);
                 else
-                    document.getElementById(this.appendTo).removeChild(this.$refs.container);
+                    document.getElementById(this.appendTo).removeChild(this.container);
             }
         },
         beforeUnmount() {
@@ -166,9 +167,13 @@ export default {
             this.unbindResizeListener();
             this.unbindOutsideClickListener();
             this.target = null;
+            this.container = null;
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        },
+        containerRef(el) {
+            this.container = el;
         }
     },
     computed: {
diff --git a/src/components/tieredmenu/TieredMenu.vue b/src/components/tieredmenu/TieredMenu.vue
index 7788c93cd..0126c215f 100755
--- a/src/components/tieredmenu/TieredMenu.vue
+++ b/src/components/tieredmenu/TieredMenu.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
-        <div ref="container" :class="containerClass" v-if="popup ? visible : true">
+        <div :ref="containerRef" :class="containerClass" v-if="popup ? visible : true">
             <TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick"/>
         </div>
     </transition>
@@ -34,6 +34,7 @@ export default {
         }
     },
     target: null,
+    container: null,
     outsideClickListener: null,
     resizeListener: null,
     data() {
@@ -46,6 +47,7 @@ export default {
         this.unbindResizeListener();
         this.unbindOutsideClickListener();
         this.target = null;
+        this.container = null;
     },
     methods: {
         itemClick(event) {
@@ -76,7 +78,7 @@ export default {
             this.bindResizeListener();
 
             if (this.autoZIndex) {
-                this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+                this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             }
         },
         onLeave() {
@@ -84,12 +86,12 @@ export default {
             this.unbindResizeListener();
         },
         alignOverlay() {
-            DomHandler.absolutePosition(this.$refs.container, this.target);
+            DomHandler.absolutePosition(this.container, this.target);
         },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
-                    if (this.visible && this.$refs.container && !this.$refs.container.contains(event.target) && !this.isTargetClicked(event)) {
+                    if (this.visible && this.container && !this.container.contains(event.target) && !this.isTargetClicked(event)) {
                         this.hide();
                     }
                 };
@@ -124,23 +126,26 @@ export default {
         appendContainer() {
             if (this.appendTo) {
                 if (this.appendTo === 'body')
-                    document.body.appendChild(this.$refs.container);
+                    document.body.appendChild(this.container);
                 else
-                    document.getElementById(this.appendTo).appendChild(this.$refs.container);
+                    document.getElementById(this.appendTo).appendChild(this.container);
             }
         },
         restoreAppend() {
-            if (this.$refs.container && this.appendTo) {
+            if (this.container && this.appendTo) {
                 if (this.appendTo === 'body')
-                    document.body.removeChild(this.$refs.container);
+                    document.body.removeChild(this.container);
                 else
-                    document.getElementById(this.appendTo).removeChild(this.$refs.container);
+                    document.getElementById(this.appendTo).removeChild(this.container);
             }
         },
         onLeafClick() {
             if (this.popup) {
                 this.hide();
             }
+        },
+        containerRef(el) {
+            this.container = el;
         }
     },
     computed: {