From a80bdc9498934b99843da75b403bb76972a2e8fb Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 28 Sep 2020 13:24:10 +0300
Subject: [PATCH] Refactored ScrollHandler

---
 src/components/menu/Menu.d.ts                 |  1 -
 src/components/menu/Menu.vue                  | 16 +++++------
 .../utils/ConnectedOverlayScrollHandler.js    | 28 +++++++------------
 src/views/menu/MenuDoc.vue                    |  6 ----
 4 files changed, 17 insertions(+), 34 deletions(-)

diff --git a/src/components/menu/Menu.d.ts b/src/components/menu/Menu.d.ts
index ca1ae0733..f1edb0d9d 100755
--- a/src/components/menu/Menu.d.ts
+++ b/src/components/menu/Menu.d.ts
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 
 export declare class Menu extends Vue {
-    id?: string;
     popup?: boolean;
     model?: any[];
     appendTo?: string;
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index f310e31d8..80b1d214f 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="containerRef" :id="containerId" :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">
@@ -20,13 +20,11 @@
 
 <script>
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import UniqueComponentId from '../utils/UniqueComponentId';
 import DomHandler from '../utils/DomHandler';
 import Menuitem from './Menuitem';
 
 export default {
     props: {
-        id: null,
         popup: {
             type: Boolean,
             default: false
@@ -63,8 +61,11 @@ export default {
         this.restoreAppend();
         this.unbindResizeListener();
         this.unbindOutsideClickListener();
-        this.unbindScrollListener();
-        this.scrollHandler = null;
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
         this.target = null;
     },
     methods: {
@@ -137,7 +138,7 @@ export default {
         },
         bindScrollListener() {
             if (!this.scrollHandler) {
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, this.containerId, () => {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
                     if (this.overlayVisible) {
                         this.hide();
                     }
@@ -203,9 +204,6 @@ export default {
         }
     },
     computed: {
-        containerId() {
-            return this.id || UniqueComponentId();
-        },
         containerClass() {
             return ['p-menu p-component', {
                 'p-menu-overlay': this.popup
diff --git a/src/components/utils/ConnectedOverlayScrollHandler.js b/src/components/utils/ConnectedOverlayScrollHandler.js
index 794cc83bc..d91b3a70e 100644
--- a/src/components/utils/ConnectedOverlayScrollHandler.js
+++ b/src/components/utils/ConnectedOverlayScrollHandler.js
@@ -1,39 +1,31 @@
 import DomHandler from './DomHandler';
-import UniqueComponentId from './UniqueComponentId';
 
 export default class ConnectedOverlayScrollHandler {
 
-    constructor(element, elementId = UniqueComponentId(), listener = () => {}) {
+    constructor(element, listener = () => {}) {
         this.element = element;
-        this.elementId = elementId;
         this.listener = listener;
     }
 
     bindScrollListener() {
         this.scrollableParents = DomHandler.getScrollableParents(this.element);
-        this.scrollListeners = {};
         for (let i = 0; i < this.scrollableParents.length; i++) {
-            let parent = this.scrollableParents[i];
-            let namespace = `${this.elementId}_${i}`;
-
-            if (!this.scrollListeners[namespace]) {
-                this.scrollListeners[namespace] = this.listener;
-                parent.addEventListener('scroll', this.scrollListeners[namespace]);
-            }
+            this.scrollableParents[i].addEventListener('scroll', this.listener);
         }
     }
 
     unbindScrollListener() {
         if (this.scrollableParents) {
             for (let i = 0; i < this.scrollableParents.length; i++) {
-                let parent = this.scrollableParents[i];
-                let namespace = `${this.elementId}_${i}`;
-
-                if (this.scrollListeners[namespace]) {
-                    parent.removeEventListener('scroll', this.scrollListeners[namespace]);
-                    this.scrollListeners[namespace] = null;
-                }
+                this.scrollableParents[i].removeEventListener('scroll', this.listener);
             }
         }
     }
+
+    destroy() {
+        this.unbindScrollListener();
+        this.element = null;
+        this.listener = null;
+        this.scrollableParents = null;
+    }
 }
diff --git a/src/views/menu/MenuDoc.vue b/src/views/menu/MenuDoc.vue
index 2b6b7e3b9..3d91a9c19 100755
--- a/src/views/menu/MenuDoc.vue
+++ b/src/views/menu/MenuDoc.vue
@@ -107,12 +107,6 @@ toggle(event) {
                             </tr>
 						</thead>
 						<tbody>
-                            <tr>
-                                <td>id</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Unique identifier of the element.</td>
-                            </tr>
                             <tr>
                                 <td>model</td>
                                 <td>array</td>