vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

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

fix(date-picker-and-select): realign after orientation change
pull/7129/head
Tuğçe Küçükoğlu 2025-01-21 11:26:37 +03:00 committed by GitHub
parent 6d936f1f34 260b571673
commit ee12f40984
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/primevue/src/datepicker/DatePicker.vue
View File

@ -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)));
},

26
packages/primevue/src/select/Select.vue
View File

@ -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;
},