Refactored ScrollHandler

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;

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

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];
+            this.scrollableParents[i].addEventListener('scroll', this.listener);
-            let namespace = `${this.elementId}_${i}`;
-
-            if (!this.scrollListeners[namespace]) {
-                this.scrollListeners[namespace] = this.listener;
-                parent.addEventListener('scroll', this.scrollListeners[namespace]);
-            }
         }
     }
 
     unbindScrollListener() {
         if (this.scrollableParents) {
             for (let i = 0; i < this.scrollableParents.length; i++) {
-                let parent = this.scrollableParents[i];
+                this.scrollableParents[i].removeEventListener('scroll', this.listener);
-                let namespace = `${this.elementId}_${i}`;
-
-                if (this.scrollListeners[namespace]) {
-                    parent.removeEventListener('scroll', this.scrollListeners[namespace]);
-                    this.scrollListeners[namespace] = null;
-                }
             }
         }
     }
+
+    destroy() {
+        this.unbindScrollListener();
+        this.element = null;
+        this.listener = null;
+        this.scrollableParents = null;
+    }
 }

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>