fix(select): reallign popup after orientation change

pull/7119/head
J-Michalek 2025-01-20 16:54:09 +01:00
parent 0d7694ac25
commit 260b571673
1 changed files with 25 additions and 1 deletions

View File

@ -227,13 +227,15 @@ export default {
searchTimeout: null, searchTimeout: null,
searchValue: null, searchValue: null,
isModelValueChanged: false, isModelValueChanged: false,
matchMediaOrientationListener: null,
data() { data() {
return { return {
clicked: false, clicked: false,
focused: false, focused: false,
focusedOptionIndex: -1, focusedOptionIndex: -1,
filterValue: null, filterValue: null,
overlayVisible: false overlayVisible: false,
queryOrientation: null
}; };
}, },
watch: { watch: {
@ -247,6 +249,7 @@ export default {
mounted() { mounted() {
this.autoUpdateModel(); this.autoUpdateModel();
this.bindLabelClickListener(); this.bindLabelClickListener();
this.bindMatchMediaOrientationListener();
}, },
updated() { updated() {
if (this.overlayVisible && this.isModelValueChanged) { if (this.overlayVisible && this.isModelValueChanged) {
@ -259,6 +262,7 @@ export default {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindResizeListener(); this.unbindResizeListener();
this.unbindLabelClickListener(); this.unbindLabelClickListener();
this.unbindMatchMediaOrientationListener();
if (this.scrollHandler) { if (this.scrollHandler) {
this.scrollHandler.destroy(); 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() { hasFocusableElements() {
return getFocusableElements(this.overlay, ':not([data-p-hidden-focusable="true"])').length > 0; return getFocusableElements(this.overlay, ':not([data-p-hidden-focusable="true"])').length > 0;
}, },