diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index 8c98e2a27..136718e90 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/src/components/autocomplete/AutoComplete.vue
@@ -107,8 +107,11 @@ export default {
     beforeUnmount() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
-        this.unbindScrollListener();
-        this.scrollHandler = null;
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
         this.overlay = null;
     },
     methods: {
@@ -143,8 +146,7 @@ export default {
         },
         bindScrollListener() {
             if (!this.scrollHandler) {
-                const { id } = this.$attrs;
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, id, () => {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
                     if (this.overlayVisible) {
                         this.hideOverlay();
                     }
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index c4fd7aa45..404970aee 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -342,8 +342,11 @@ export default {
 
         this.restoreAppend();
         this.unbindOutsideClickListener();
-        this.unbindScrollListener();
-        this.scrollHandler = null;
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
         this.overlay = null;
     },
     data() {
@@ -646,8 +649,7 @@ export default {
         },
         bindScrollListener() {
             if (!this.scrollHandler) {
-                const { id } = this.$attrs;
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, id, () => {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
                     if (this.overlayVisible) {
                         this.overlayVisible = false;
                     }
diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue
index 1b5c26e59..e87d52e69 100755
--- a/src/components/colorpicker/ColorPicker.vue
+++ b/src/components/colorpicker/ColorPicker.vue
@@ -84,8 +84,11 @@ export default {
         this.unbindOutsideClickListener();
         this.unbindDocumentMouseMoveListener();
         this.unbindDocumentMouseUpListener();
-        this.unbindScrollListener();
-        this.scrollHandler = null;
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
         this.clearRefs();
     },
     mounted() {
@@ -410,8 +413,7 @@ export default {
         },
         bindScrollListener() {
             if (!this.scrollHandler) {
-                const { id } = this.$attrs;
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, id, () => {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
                     if (this.overlayVisible) {
                         this.overlayVisible = false;
                     }
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index d6244d177..295cd499b 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -93,8 +93,11 @@ export default {
     beforeUnmount() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
-        this.unbindScrollListener();
-        this.scrollHandler = null;
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
         this.overlay = null;
     },
     updated() {
@@ -355,8 +358,7 @@ export default {
         },
         bindScrollListener() {
             if (!this.scrollHandler) {
-                const { id } = this.$attrs;
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, id, () => {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
                     if (this.overlayVisible) {
                         this.hide();
                     }
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index fc7a9fc2b..4ea9d118f 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -103,8 +103,11 @@ export default {
     beforeUnmount() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
-        this.unbindScrollListener();
-        this.scrollHandler = null;
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
         this.overlay = null;
     },
     updated() {
@@ -315,8 +318,7 @@ export default {
         },
         bindScrollListener() {
             if (!this.scrollHandler) {
-                const { id } = this.$attrs;
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, id, () => {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
                     if (this.overlayVisible) {
                         this.hide();
                     }
diff --git a/src/components/overlaypanel/OverlayPanel.d.ts b/src/components/overlaypanel/OverlayPanel.d.ts
index 7c90631f1..0155c42c1 100755
--- a/src/components/overlaypanel/OverlayPanel.d.ts
+++ b/src/components/overlaypanel/OverlayPanel.d.ts
@@ -1,7 +1,6 @@
 import Vue, { VNode } from 'vue';
 
 export declare class OverlayPanel extends Vue {
-    id?: string;
     ismissable?: boolean;
     showCloseIcon?: boolean;
     appendTo?: string;
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index acf7981f8..0ca795510 100755
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/src/components/overlaypanel/OverlayPanel.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave">
-        <div class="p-overlaypanel p-component" v-if="visible" :id="containerId" :ref="containerRef">
+        <div class="p-overlaypanel p-component" v-if="visible" :ref="containerRef">
             <div class="p-overlaypanel-content">
                 <slot></slot>
             </div>
@@ -13,13 +13,11 @@
 
 <script>
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import UniqueComponentId from '../utils/UniqueComponentId';
 import DomHandler from '../utils/DomHandler';
 import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
-        id: null,
 		dismissable: {
 			type: Boolean,
 			default: true
@@ -61,8 +59,11 @@ export default {
         if (this.dismissable) {
             this.unbindOutsideClickListener();
         }
-        this.unbindScrollListener();
-        this.scrollHandler = null;
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
         this.target = null;
         this.container = null;
     },
@@ -124,7 +125,7 @@ export default {
         },
         bindScrollListener() {
             if (!this.scrollHandler) {
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, this.containerId, () => {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
                     if (this.visible) {
                         this.visible = false;
                     }
@@ -177,11 +178,6 @@ export default {
             this.container = el;
         }
     },
-    computed: {
-        containerId() {
-            return this.id || UniqueComponentId();
-        }
-    },
     directives: {
         'ripple': Ripple
     }
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
index 600d2b6dc..decd10510 100755
--- a/src/components/password/Password.vue
+++ b/src/components/password/Password.vue
@@ -50,8 +50,10 @@ export default {
         this.strongCheckRegExp = new RegExp(this.strongRegex);
     },
     beforeUnmount() {
-        this.unbindScrollListener();
-        this.scrollHandler = null;
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
     },
     methods: {
         testStrength(str) {
@@ -155,8 +157,7 @@ export default {
         },
         bindScrollListener() {
             if (!this.scrollHandler) {
-                const { id } = this.$attrs;
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.input, id, () => {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.input, () => {
                     if (DomHandler.hasClass(this.panel, 'p-connected-overlay-visible')) {
                         this.hideOverlay();
                     }
diff --git a/src/components/tieredmenu/TieredMenu.d.ts b/src/components/tieredmenu/TieredMenu.d.ts
index b3f56a13e..a84b2199a 100755
--- a/src/components/tieredmenu/TieredMenu.d.ts
+++ b/src/components/tieredmenu/TieredMenu.d.ts
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 
 export declare class TieredMenu extends Vue {
-    id?: string;
     popup?: boolean;
     model?: any[];
     appendTo?: string;
diff --git a/src/components/tieredmenu/TieredMenu.vue b/src/components/tieredmenu/TieredMenu.vue
index e08be41bf..102579e21 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="containerRef" :id="containerId" :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>
@@ -8,13 +8,11 @@
 
 <script>
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import UniqueComponentId from '../utils/UniqueComponentId';
 import DomHandler from '../utils/DomHandler';
 import TieredMenuSub from './TieredMenuSub';
 
 export default {
     props: {
-        id: null,
         popup: {
             type: Boolean,
             default: false
@@ -50,8 +48,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;
         this.container = null;
     },
@@ -114,7 +115,7 @@ export default {
         },
         bindScrollListener() {
             if (!this.scrollHandler) {
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, this.containerId, () => {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
                     if (this.visible) {
                         this.hide();
                     }
@@ -173,9 +174,6 @@ export default {
         }
     },
     computed: {
-        containerId() {
-            return this.id || UniqueComponentId();
-        },
         containerClass() {
             return ['p-tieredmenu p-component', {
                 'p-tieredmenu-overlay': this.popup
diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
index eeeb263fa..735f88e04 100755
--- a/src/views/overlaypanel/OverlayPanelDoc.vue
+++ b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -52,12 +52,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>dismissable</td>
                                 <td>boolean</td>
diff --git a/src/views/tieredmenu/TieredMenuDoc.vue b/src/views/tieredmenu/TieredMenuDoc.vue
index 7df039dab..70dffd1a3 100755
--- a/src/views/tieredmenu/TieredMenuDoc.vue
+++ b/src/views/tieredmenu/TieredMenuDoc.vue
@@ -193,12 +193,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>