Fixed #3432 - ConfirmPopup: page scrolls up when push the button

pull/3509/head
Tuğçe Küçükoğlu 2023-01-09 15:58:56 +03:00
parent 61508e656c
commit d197cb6873
1 changed files with 11 additions and 10 deletions

View File

@ -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: {