Add resize listeners

src/components/autocomplete/AutoComplete.vue

@@ -81,6 +81,7 @@ export default {
     },
     timeout: null,
     outsideClickListener: null,
+    resizeListener: null,
     scrollHandler: null,
     overlay: null,
     data() {
@@ -107,6 +108,7 @@ export default {
     beforeUnmount() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
+        this.unbindResizeListener();
 
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
@@ -121,10 +123,12 @@ export default {
             this.alignOverlay();
             this.bindOutsideClickListener();
             this.bindScrollListener();
+            this.bindResizeListener();
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
+            this.unbindResizeListener();
             this.overlay = null;
         },
         alignOverlay() {
@@ -160,6 +164,22 @@ export default {
                 this.scrollHandler.unbindScrollListener();
             }
         },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible) {
+                        this.hideOverlay();
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
         isOutsideClicked(event) {
             return !this.overlay.contains(event.target) && !this.isInputClicked(event) && !this.isDropdownClicked(event);
         },

src/components/calendar/Calendar.vue

@@ -310,6 +310,13 @@ export default {
     },
     navigationState: null,
     scrollHandler: null,
+    outsideClickListener: null,
+    maskClickListener: null,
+    resizeListener: null,
+    overlay: null,
+    mask: null,
+    timePickerTimer: null,
+    isKeydown: false,
     created() {
         this.updateCurrentMetaData();
     },
@@ -342,6 +349,7 @@ export default {
 
         this.restoreAppend();
         this.unbindOutsideClickListener();
+        this.unbindResizeListener();
 
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
@@ -361,12 +369,6 @@ export default {
             overlayVisible: false
         }
     },
-    outsideClickListener: null,
-    maskClickListener: null,
-    overlay: null,
-    mask: null,
-    timePickerTimer: null,
-    isKeydown: false,
     watch: {
         modelValue() {
             this.updateCurrentMetaData();
@@ -545,10 +547,12 @@ export default {
         onOverlayEnterComplete() {
             this.bindOutsideClickListener();
             this.bindScrollListener();
+            this.bindResizeListener();
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
+            this.unbindResizeListener();
             this.$emit('hide');
             this.overlay = null;
         },
@@ -663,6 +667,22 @@ export default {
                 this.scrollHandler.unbindScrollListener();
             }
         },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible) {
+                        this.overlayVisible = false;
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
         isOutsideClicked(event) {
             return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) ||
                     this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));

src/components/colorpicker/ColorPicker.vue

@@ -72,6 +72,7 @@ export default {
     documentMouseMoveListener: null,
     documentMouseUpListener: null,
     scrollHandler: null,
+    resizeListener: null,
     hueDragging: null,
     colorDragging: null,
     selfUpdate: null,
@@ -84,6 +85,7 @@ export default {
         this.unbindOutsideClickListener();
         this.unbindDocumentMouseMoveListener();
         this.unbindDocumentMouseUpListener();
+        this.unbindResizeListener();
 
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
@@ -331,6 +333,7 @@ export default {
             this.alignOverlay();
             this.bindOutsideClickListener();
             this.bindScrollListener();
+            this.bindResizeListener();
 
             if (this.autoZIndex) {
                 this.picker.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
@@ -339,6 +342,7 @@ export default {
         onOverlayLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
+            this.unbindResizeListener();
             this.clearRefs();
         },
         alignOverlay() {
@@ -427,6 +431,22 @@ export default {
                 this.scrollHandler.unbindScrollListener();
             }
         },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible) {
+                        this.overlayVisible = false;
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
         bindDocumentMouseMoveListener() {
             if (!this.documentMouseMoveListener) {
                 this.documentMouseMoveListener = (event) => {

src/components/dropdown/Dropdown.vue

@@ -85,6 +85,7 @@ export default {
     },
     outsideClickListener: null,
     scrollHandler: null,
+    resizeListener: null,
     searchTimeout: null,
     currentSearchChar: null,
     previousSearchChar: null,
@@ -93,6 +94,7 @@ export default {
     beforeUnmount() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
+        this.unbindResizeListener();
 
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
@@ -315,6 +317,7 @@ export default {
             this.alignOverlay();
             this.bindOutsideClickListener();
             this.bindScrollListener();
+            this.bindResizeListener();
 
             if (this.filter) {
                 this.$refs.filterInput.focus();
@@ -325,6 +328,7 @@ export default {
         onOverlayLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
+            this.unbindResizeListener();
             this.$emit('hide');
             this.overlay = null;
         },
@@ -372,6 +376,22 @@ export default {
                 this.scrollHandler.unbindScrollListener();
             }
         },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible) {
+                        this.hide();
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
         search(event) {
             if (!this.visibleOptions) {
                 return;

src/components/multiselect/MultiSelect.vue

@@ -98,11 +98,13 @@ export default {
         };
     },
     outsideClickListener: null,
+    resizeListener: null,
     scrollHandler: null,
     overlay: null,
     beforeUnmount() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
+        this.unbindResizeListener();
 
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
@@ -283,11 +285,13 @@ export default {
             this.alignOverlay();
             this.bindOutsideClickListener();
             this.bindScrollListener();
+            this.bindResizeListener();
             this.$emit('show');
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
+            this.unbindResizeListener();
             this.$emit('hide');
             this.overlay = null;
         },
@@ -332,6 +336,22 @@ export default {
                 this.scrollHandler.unbindScrollListener();
             }
         },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible) {
+                        this.hide();
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
         isOutsideClicked(event) {
             return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
         },

src/components/overlaypanel/OverlayPanel.vue

@@ -55,7 +55,6 @@ export default {
     container: null,
     beforeUnmount() {
         this.restoreAppend();
-        this.unbindResizeListener();
         if (this.dismissable) {
             this.unbindOutsideClickListener();
         }
@@ -64,6 +63,7 @@ export default {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
+        this.unbindResizeListener();
         this.target = null;
         this.container = null;
     },
@@ -88,8 +88,8 @@ export default {
                 this.bindOutsideClickListener();
             }
 
-            this.bindResizeListener();
             this.bindScrollListener();
+            this.bindResizeListener();
 
             if (this.autoZIndex) {
                 this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
@@ -97,8 +97,8 @@ export default {
         },
         onLeave() {
             this.unbindOutsideClickListener();
-            this.unbindResizeListener();
             this.unbindScrollListener();
+            this.unbindResizeListener();
         },
         alignOverlay() {
             DomHandler.absolutePosition(this.container, this.target);