fix(select): reallign popup after orientation change
parent
0d7694ac25
commit
260b571673
|
@ -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;
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue