Fixed #6779 - Drawer: dismissable mode behaviour defects

primefaces · Nov 13, 2024 · 142882f · 142882f
1 parent d2d6d07
commit 142882f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/primevue/src/drawer/Drawer.vue b/packages/primevue/src/drawer/Drawer.vue
@@ -1,8 +1,8 @@
 <template>
     <Portal>
-        <div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position })" v-bind="ptm('mask')">
+        <div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position, modal })" v-bind="ptm('mask')">
             <transition name="p-drawer" @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 :class="cx('root')" role="complementary" :aria-modal="modal" v-bind="ptmi('root')">
+                <div v-if="visible" :ref="containerRef" v-focustrap :class="cx('root')" :style="sx('root')" role="complementary" :aria-modal="modal" v-bind="ptmi('root')">
                     <slot v-if="$slots.container" name="container" :closeCallback="hide"></slot>
                     <template v-else>
                         <div :ref="headerContainerRef" :class="cx('header')" v-bind="ptm('header')">

diff --git a/packages/primevue/src/drawer/style/DrawerStyle.js b/packages/primevue/src/drawer/style/DrawerStyle.js
@@ -4,7 +4,6 @@ const theme = ({ dt }) => `
 .p-drawer {
     display: flex;
     flex-direction: column;
-    pointer-events: auto;
     transform: translate3d(0px, 0px, 0px);
     position: relative;
     transition: transform 0.3s;
@@ -120,16 +119,20 @@ const theme = ({ dt }) => `
 `;
 
 const inlineStyles = {
-    mask: ({ position }) => ({
+    mask: ({ position, modal }) => ({
         position: 'fixed',
         height: '100%',
         width: '100%',
         left: 0,
         top: 0,
         display: 'flex',
         justifyContent: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
-        alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'
-    })
+        alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center',
+        pointerEvents: modal ? 'auto' : 'none'
+    }),
+    root: {
+        pointerEvents: 'auto'
+    }
 };
 
 const classes = {