From ea3c291cace89d2d76b9b6dfcb9bde41f7481849 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 10 Oct 2020 15:22:24 +0300
Subject: [PATCH] Fixed #524 - Can't close MultiSelect or Select when inside
 Dialog component

---
 src/components/dialog/Dialog.vue           | 6 +++---
 src/components/multiselect/MultiSelect.vue | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 8faeca9f2..8ef7bae3e 100755
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -1,7 +1,7 @@
 <template>
     <div :ref="maskRef" :class="maskClass" v-if="containerVisible" @click="onMaskClick">
         <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
-            <div :ref="containerRef" :class="dialogClass" v-if="visible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" @click.stop>
+            <div :ref="containerRef" :class="dialogClass" v-if="visible" v-bind="$attrs" 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>
@@ -115,8 +115,8 @@ export default {
             this.containerVisible = false;
             this.unbindDocumentState();
         },
-        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
index 8eb69075f..851ccaff0 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -165,8 +165,9 @@ export default {
         onHeaderCheckboxBlur() {
             this.headerCheckboxFocused = false;
         },
-        onClick() {
-            if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target))) {
+        onClick(event) {
+            if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-multiselect-close')) {
+                DomHandler.hasClass(event.target, 'p-multiselect-close');
                 if (this.overlayVisible)
                     this.hide();
                 else