Fixed #567 - Can't close MultiSelect or Select when inside Dialog com…

…ponent
primefaces · Oct 14, 2020 · 4f41919 · 4f41919
1 parent 73d13d2
commit 4f41919
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
@@ -1,7 +1,7 @@
 <template>
     <div ref="mask" :class="maskClass" v-if="maskVisible" @click="onMaskClick">
         <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" @appear="onAppear">
-            <div ref="dialog" :class="dialogClass" :style="dialogStyle" v-if="visible" v-bind="$attrs" v-on="listeners" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" @click.stop>
+            <div ref="dialog" :class="dialogClass" :style="dialogStyle" v-if="visible" v-bind="$attrs" v-on="listeners" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
                 <div class="p-dialog-header" v-if="showHeader">
                     <slot name="header">
                         <span :id="ariaLabelledById" class="p-dialog-title" v-if="header" >{{header}}</span>
@@ -127,8 +127,8 @@ export default {
                 this.onEnter();
             }
         },
-        onMaskClick() {
-            if (this.modal && this.closable && this.dismissableMask) {
+        onMaskClick(event) {
+            if (this.dismissableMask && this.closable && this.modal && this.mask === event.target) {
                 this.close();
             }
         },

diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
@@ -164,7 +164,7 @@ export default {
             this.headerCheckboxFocused = false;
         },
         onClick() {
-            if (!this.disabled && (!this.$refs.overlay || !this.$refs.overlay.contains(event.target))) {
+            if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-multiselect-close')) {
                 if (this.overlayVisible)
                     this.hide();
                 else