Merge pull request #7119 from J-Michalek/fix/datepicker-and-select-realign-after-orientation-change

fix(date-picker-and-select): realign after orientation change

packages/primevue/src/datepicker/DatePicker.vue

@@ -571,6 +571,7 @@ export default {
     timePickerTimer: null,
     preventFocus: false,
     typeUpdate: false,
+    matchMediaOrientationListener: null,
     data() {
         return {
             currentMonth: null,
@@ -583,7 +584,8 @@ export default {
             overlayVisible: false,
             currentView: this.view,
             query: null,
-            queryMatches: false
+            queryMatches: false,
+            queryOrientation: null
         };
     },
     watch: {
@@ -637,6 +639,7 @@ export default {
     mounted() {
         this.createResponsiveStyle();
         this.bindMatchMediaListener();
+        this.bindMatchMediaOrientationListener();
 
         if (this.inline) {
             if (!this.disabled) {
@@ -670,6 +673,7 @@ export default {
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
         this.unbindMatchMediaListener();
+        this.unbindMatchMediaOrientationListener();
 
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
@@ -1071,6 +1075,26 @@ export default {
                 this.matchMediaListener = null;
             }
         },
+        bindMatchMediaOrientationListener() {
+            if (!this.matchMediaOrientationListener) {
+                const query = matchMedia(`(orientation: portrait)`);
+
+                this.queryOrientation = query;
+
+                this.matchMediaOrientationListener = () => {
+                    this.alignOverlay();
+                };
+
+                this.queryOrientation.addEventListener('change', this.matchMediaOrientationListener);
+            }
+        },
+        unbindMatchMediaOrientationListener() {
+            if (this.matchMediaOrientationListener) {
+                this.queryOrientation.removeEventListener('change', this.matchMediaOrientationListener);
+                this.queryOrientation = null;
+                this.matchMediaOrientationListener = null;
+            }
+        },
         isOutsideClicked(event) {
             return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
         },

packages/primevue/src/select/Select.vue

@@ -227,13 +227,15 @@ export default {
     searchTimeout: null,
     searchValue: null,
     isModelValueChanged: false,
+    matchMediaOrientationListener: null,
     data() {
         return {
             clicked: false,
             focused: false,
             focusedOptionIndex: -1,
             filterValue: null,
-            overlayVisible: false
+            overlayVisible: false,
+            queryOrientation: null
         };
     },
     watch: {
@@ -247,6 +249,7 @@ export default {
     mounted() {
         this.autoUpdateModel();
         this.bindLabelClickListener();
+        this.bindMatchMediaOrientationListener();
     },
     updated() {
         if (this.overlayVisible && this.isModelValueChanged) {
@@ -259,6 +262,7 @@ export default {
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
         this.unbindLabelClickListener();
+        this.unbindMatchMediaOrientationListener();
 
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
@@ -792,6 +796,26 @@ export default {
                 }
             }
         },
+        bindMatchMediaOrientationListener() {
+            if (!this.matchMediaOrientationListener) {
+                const query = matchMedia(`(orientation: portrait)`);
+
+                this.queryOrientation = query;
+
+                this.matchMediaOrientationListener = () => {
+                    this.alignOverlay();
+                };
+
+                this.queryOrientation.addEventListener('change', this.matchMediaOrientationListener);
+            }
+        },
+        unbindMatchMediaOrientationListener() {
+            if (this.matchMediaOrientationListener) {
+                this.queryOrientation.removeEventListener('change', this.matchMediaOrientationListener);
+                this.queryOrientation = null;
+                this.matchMediaOrientationListener = null;
+            }
+        },
         hasFocusableElements() {
             return getFocusableElements(this.overlay, ':not([data-p-hidden-focusable="true"])').length > 0;
         },