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

fix: fix the unexpected joggle state when `dialog` component non-fixed

pull/6163/head
王子凌 2024-08-01 19:43:21 +08:00
parent 2fa7e77121
commit e1ebb36bd2
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/dialog/Dialog.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Portal :appendTo="appendTo"> <Portal :appendTo="appendTo">
<div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @click="onMaskClick" v-bind="ptm('mask')"> <div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @click="onMaskClick" v-bind="ptm('mask')">
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')"> <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
<div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" :style="sx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="ptmi('root')"> <div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" :style="sx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="ptmi('root')">
<slot v-if="$slots.container" name="container" :onClose="close" :onMaximize="(event) => maximize(event)" :closeCallback="close" :maximizeCallback="(event) => maximize(event)"></slot> <slot v-if="$slots.container" name="container" :onClose="close" :onMaximize="(event) => maximize(event)" :closeCallback="close" :maximizeCallback="(event) => maximize(event)"></slot>
<template v-else> <template v-else>
@ -141,7 +141,6 @@ export default {
onEnter() { onEnter() {
this.$emit('show'); this.$emit('show');
this.target = document.activeElement; this.target = document.activeElement;
this.focus();
this.enableDocumentSettings(); this.enableDocumentSettings();
this.bindGlobalListeners(); this.bindGlobalListeners();
@ -149,6 +148,9 @@ export default {
ZIndexUtils.set('modal', this.mask, this.baseZIndex + this.$primevue.config.zIndex.modal); ZIndexUtils.set('modal', this.mask, this.baseZIndex + this.$primevue.config.zIndex.modal);
} }
}, },
onAfterEnter() {
this.focus();
},
onBeforeLeave() { onBeforeLeave() {
if (this.modal) { if (this.modal) {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave'); !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');