Fixed #3432 - ConfirmPopup: page scrolls up when push the button
parent
61508e656c
commit
d197cb6873
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<Portal>
|
<Portal>
|
||||||
<transition name="p-confirm-popup" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
|
<transition name="p-confirm-popup" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
|
||||||
<div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="$attrs">
|
<div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="$attrs">
|
||||||
<template v-if="!$slots.message">
|
<template v-if="!$slots.message">
|
||||||
<div class="p-confirm-popup-content">
|
<div class="p-confirm-popup-content">
|
||||||
|
@ -35,7 +35,9 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
visible: false,
|
visible: false,
|
||||||
confirmation: null
|
confirmation: null,
|
||||||
|
autoFocusAccept: null,
|
||||||
|
autoFocusReject: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
target: null,
|
target: null,
|
||||||
|
@ -129,13 +131,18 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onEnter(el) {
|
onEnter(el) {
|
||||||
this.focus();
|
this.autoFocusAccept = this.confirmation.defaultFocus === undefined || this.confirmation.defaultFocus === 'accept' ? true : false;
|
||||||
|
this.autoFocusReject = this.confirmation.defaultFocus === 'reject' ? true : false;
|
||||||
|
|
||||||
this.bindOutsideClickListener();
|
this.bindOutsideClickListener();
|
||||||
this.bindScrollListener();
|
this.bindScrollListener();
|
||||||
this.bindResizeListener();
|
this.bindResizeListener();
|
||||||
|
|
||||||
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
|
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
|
||||||
},
|
},
|
||||||
|
onAfterEnter() {
|
||||||
|
this.focus();
|
||||||
|
},
|
||||||
onLeave() {
|
onLeave() {
|
||||||
this.unbindOutsideClickListener();
|
this.unbindOutsideClickListener();
|
||||||
this.unbindScrollListener();
|
this.unbindScrollListener();
|
||||||
|
@ -221,7 +228,7 @@ export default {
|
||||||
let focusTarget = this.container.querySelector('[autofocus]');
|
let focusTarget = this.container.querySelector('[autofocus]');
|
||||||
|
|
||||||
if (focusTarget) {
|
if (focusTarget) {
|
||||||
focusTarget.focus();
|
focusTarget.focus({ preventScroll: true }); // Firefox requires preventScroll
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
isTargetClicked(event) {
|
isTargetClicked(event) {
|
||||||
|
@ -276,12 +283,6 @@ export default {
|
||||||
},
|
},
|
||||||
rejectClass() {
|
rejectClass() {
|
||||||
return ['p-confirm-popup-reject p-button-sm', this.confirmation ? this.confirmation.rejectClass || 'p-button-text' : null];
|
return ['p-confirm-popup-reject p-button-sm', this.confirmation ? this.confirmation.rejectClass || 'p-button-text' : null];
|
||||||
},
|
|
||||||
autoFocusAccept() {
|
|
||||||
return this.confirmation.defaultFocus === undefined || this.confirmation.defaultFocus === 'accept' ? true : false;
|
|
||||||
},
|
|
||||||
autoFocusReject() {
|
|
||||||
return this.confirmation.defaultFocus === 'reject' ? true : false;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
Loading…
Reference in New Issue