From 8c9227849b0efb144ffede78b5920201f82b2c0b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 2 Mar 2021 13:01:07 +0300
Subject: [PATCH] Fixed #1041 - Improve the interaction of nested overlays

---
 src/components/autocomplete/AutoComplete.vue   | 13 ++++++++-----
 src/components/calendar/Calendar.vue           | 13 ++++++++++---
 src/components/cascadeselect/CascadeSelect.vue | 12 ++++++++----
 src/components/colorpicker/ColorPicker.vue     | 11 ++++++++---
 src/components/confirmpopup/ConfirmPopup.vue   | 11 ++++++++---
 src/components/dropdown/Dropdown.vue           | 12 ++++++++----
 src/components/menu/Menu.vue                   | 11 ++++++++---
 src/components/multiselect/MultiSelect.vue     | 12 ++++++++----
 src/components/overlaypanel/OverlayPanel.vue   | 16 ++++++++++++++--
 src/components/password/Password.vue           | 11 ++++++++---
 src/components/tieredmenu/TieredMenu.vue       | 11 ++++++++---
 src/components/utils/OverlayEventBus.js        |  3 +++
 src/components/utils/Utils.js                  |  3 ++-
 src/views/overlaypanel/OverlayPanelDoc.vue     |  2 +-
 14 files changed, 102 insertions(+), 39 deletions(-)
 create mode 100644 src/components/utils/OverlayEventBus.js

diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index 1ee63b1e15..cba9e1e8a6 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/src/components/autocomplete/AutoComplete.vue
@@ -16,7 +16,7 @@
         <Button ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
         <Teleport :to="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
-                <div :ref="overlayRef" class="p-autocomplete-panel p-component" :style="{'max-height': scrollHeight}" v-if="overlayVisible">
+                <div :ref="overlayRef" class="p-autocomplete-panel p-component" :style="{'max-height': scrollHeight}" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :suggestions="suggestions"></slot>
                     <ul :id="listId" class="p-autocomplete-items" role="listbox">
                         <template v-if="!optionGroupLabel">
@@ -43,10 +43,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler} from 'primevue/utils';
-import {UniqueComponentId} from 'primevue/utils';
-import {ObjectUtils} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
+import {ConnectedOverlayScrollHandler,UniqueComponentId,ObjectUtils,DomHandler,OverlayEventBus} from 'primevue/utils';
 import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
 
@@ -499,6 +496,12 @@ export default {
         },
         overlayRef(el) {
             this.overlay = el;
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.$el
+            });
         }
     },
     computed: {
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 6f3f1c4eee..a0786e1563 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -5,7 +5,7 @@
         <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
         <Teleport :to="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
-                <div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'">
+                <div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" @click="onOverlayClick">
                     <template v-if="!timeOnly">
                         <div class="p-datepicker-group-container">
                             <div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">
@@ -133,10 +133,9 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler} from 'primevue/utils';
+import {ConnectedOverlayScrollHandler,DomHandler,OverlayEventBus} from 'primevue/utils';
 import InputText from 'primevue/inputtext';
 import Button from 'primevue/button';
-import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -1955,6 +1954,14 @@ export default {
         },
         getMonthName(index) {
             return this.$primevue.config.locale.monthNames[index];
+        },
+        onOverlayClick(event) {
+            if (!this.inline) {
+                OverlayEventBus.emit('overlay-click', {
+                    originalEvent: event,
+                    target: this.$el
+                });
+            }
         }
     },
     computed: {
diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index 593460fad6..be93bb49a2 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/src/components/cascadeselect/CascadeSelect.vue
@@ -14,7 +14,7 @@
         </div>
         <Teleport :to="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
-                <div :ref="overlayRef" class="p-cascadeselect-panel p-component" v-if="overlayVisible">
+                <div :ref="overlayRef" class="p-cascadeselect-panel p-component" v-if="overlayVisible" @click="onOverlayClick">
                     <div class="p-cascadeselect-items-wrapper">
                         <CascadeSelectSub :options="options" :selectionPath="selectionPath" 
                             :optionLabel="optionLabel" :optionValue="optionValue" :level="0" :templates="$slots"
@@ -28,9 +28,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler} from 'primevue/utils';
-import {ObjectUtils} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
+import {ConnectedOverlayScrollHandler,ObjectUtils,DomHandler,OverlayEventBus} from 'primevue/utils';
 import CascadeSelectSub from './CascadeSelectSub.vue';
 
 export default {
@@ -259,6 +257,12 @@ export default {
                     this.hide();
                 break;
             }
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.$el
+            });
         }
     },
     computed: {
diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue
index 91c1c62518..527a9235d2 100755
--- a/src/components/colorpicker/ColorPicker.vue
+++ b/src/components/colorpicker/ColorPicker.vue
@@ -4,7 +4,7 @@
             @click="onInputClick" @keydown="onInputKeydown" v-if="!inline" :aria-labelledby="ariaLabelledBy"/>
         <Teleport to="body" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
-                <div :ref="pickerRef" :class="pickerClass" v-if="inline ? true : overlayVisible">
+                <div :ref="pickerRef" :class="pickerClass" v-if="inline ? true : overlayVisible" @click="onOverlayClick">
                     <div class="p-colorpicker-content">
                         <div :ref="colorSelectorRef" class="p-colorpicker-color-selector" @mousedown="onColorMousedown($event)"
                             @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
@@ -24,8 +24,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
+import {ConnectedOverlayScrollHandler,DomHandler,OverlayEventBus} from 'primevue/utils';
 
 export default {
     emits: ['update:modelValue'],
@@ -535,6 +534,12 @@ export default {
             this.colorHandle = null;
             this.hueView = null;
             this.hueHandle = null;
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.$el
+            });
         }
     },
     computed: {
diff --git a/src/components/confirmpopup/ConfirmPopup.vue b/src/components/confirmpopup/ConfirmPopup.vue
index 2336eb6c6c..a97d49f0b4 100644
--- a/src/components/confirmpopup/ConfirmPopup.vue
+++ b/src/components/confirmpopup/ConfirmPopup.vue
@@ -1,7 +1,7 @@
 <template>
     <Teleport to="body">
         <transition name="p-confirm-popup" @enter="onEnter" @leave="onLeave">
-            <div class="p-confirm-popup p-component" v-if="visible" :ref="containerRef" v-bind="$attrs">
+            <div class="p-confirm-popup p-component" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
                 <div class="p-confirm-popup-content">
                     <i :class="iconClass" /> 
                     <span class="p-confirm-popup-message">{{confirmation.message}}</span>
@@ -17,8 +17,7 @@
 
 <script>
 import ConfirmationEventBus from 'primevue/confirmationeventbus';
-import {ConnectedOverlayScrollHandler} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
+import {ConnectedOverlayScrollHandler,DomHandler,OverlayEventBus} from 'primevue/utils';
 import Button from 'primevue/button';
 
 export default {
@@ -165,6 +164,12 @@ export default {
         },
         containerRef(el) {
             this.container = el;
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.target
+            });
         }
     },
     computed: {
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index adec006db6..ec206e3c90 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -15,7 +15,7 @@
         </div>
         <Teleport :to="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
-                <div :ref="overlayRef" class="p-dropdown-panel p-component" v-if="overlayVisible">
+                <div :ref="overlayRef" class="p-dropdown-panel p-component" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
                     <div class="p-dropdown-header" v-if="filter">
                         <div  class="p-dropdown-filter-container">
@@ -58,9 +58,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler} from 'primevue/utils';
-import {ObjectUtils} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
+import {ConnectedOverlayScrollHandler,ObjectUtils,DomHandler,OverlayEventBus} from 'primevue/utils';
 import {FilterService} from 'primevue/api';
 import Ripple from 'primevue/ripple';
 
@@ -564,6 +562,12 @@ export default {
                     this.itemsWrapper.scrollTop = selectedItem.offsetTop;
                 }
             }
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.$el
+            });
         }
     },
     computed: {
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index 274c687549..686cb47dc7 100755
--- a/src/components/menu/Menu.vue
+++ b/src/components/menu/Menu.vue
@@ -1,7 +1,7 @@
 <template>
     <Teleport :to="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
-            <div :ref="containerRef" :class="containerClass" v-if="popup ? overlayVisible : true" v-bind="$attrs">
+            <div :ref="containerRef" :class="containerClass" v-if="popup ? overlayVisible : true" v-bind="$attrs" @click="onOverlayClick">
                 <ul class="p-menu-list p-reset" role="menu">
                     <template v-for="(item, i) of model" :key="item.label + i.toString()">
                         <template v-if="item.items && visible(item) && !item.separator">
@@ -21,8 +21,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
+import {ConnectedOverlayScrollHandler,DomHandler,OverlayEventBus} from 'primevue/utils';
 import Menuitem from './Menuitem.vue';
 
 export default {
@@ -176,6 +175,12 @@ export default {
         },
         containerRef(el) {
             this.container = el;
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.target
+            });
         }
     },
     computed: {
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index 97ec7dac83..d7d876efe2 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -25,7 +25,7 @@
         </div>
         <Teleport :to="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
-                <div :ref="overlayRef" class="p-multiselect-panel p-component" v-if="overlayVisible">
+                <div :ref="overlayRef" class="p-multiselect-panel p-component" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
                     <div class="p-multiselect-header">
                         <div class="p-checkbox p-component" @click="onToggleAll" role="checkbox" :aria-checked="allSelected">
@@ -93,9 +93,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler} from 'primevue/utils';
-import {ObjectUtils} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
+import {ConnectedOverlayScrollHandler,ObjectUtils,DomHandler,OverlayEventBus} from 'primevue/utils';
 import {FilterService} from 'primevue/api';
 import Ripple from 'primevue/ripple';
 
@@ -473,6 +471,12 @@ export default {
 
             this.$emit('update:modelValue', value);
             this.$emit('change', {originalEvent: event, value: value});
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.$el
+            });
         }
     },
     computed: {
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index 381e0a3605..4f21e5e437 100755
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/src/components/overlaypanel/OverlayPanel.vue
@@ -1,7 +1,7 @@
 <template>
     <Teleport :to="appendTo">
         <transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave">
-            <div class="p-overlaypanel p-component" v-if="visible" :ref="containerRef" v-bind="$attrs">
+            <div class="p-overlaypanel p-component" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
                 <div class="p-overlaypanel-content" @click="onContentClick">
                     <slot></slot>
                 </div>
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import {UniqueComponentId,DomHandler,ConnectedOverlayScrollHandler} from 'primevue/utils';
+import {UniqueComponentId,DomHandler,ConnectedOverlayScrollHandler,OverlayEventBus} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -110,11 +110,17 @@ export default {
             if (this.autoZIndex) {
                 this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             }
+            OverlayEventBus.on('overlay-click', e => {
+                if (this.container.contains(e.target)) {
+                    this.selfClick = true;
+                }
+            });
         },
         onLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
             this.unbindResizeListener();
+            OverlayEventBus.off('overlay-click');
         },
         alignOverlay() {
             DomHandler.absolutePosition(this.container, this.target);
@@ -213,6 +219,12 @@ export default {
                 document.head.removeChild(this.styleElement);
                 this.styleElement = null;
             }
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.target
+            });
         }
     },
     computed: {
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
index f0335a4ce9..9c62a63bf0 100755
--- a/src/components/password/Password.vue
+++ b/src/components/password/Password.vue
@@ -4,7 +4,7 @@
         <i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
         <Teleport :to="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
-                <div :ref="overlayRef" class="p-password-panel p-component" v-if="overlayVisible">
+                <div :ref="overlayRef" class="p-password-panel p-component" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header"></slot>
                     <slot name="content">
                         <div class="p-password-meter">
@@ -20,8 +20,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
+import {ConnectedOverlayScrollHandler,DomHandler,OverlayEventBus} from 'primevue/utils';
 import InputText from 'primevue/inputtext';
 
 export default {
@@ -221,6 +220,12 @@ export default {
         },
         onMaskToggle() {
             this.unmasked = !this.unmasked;
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.$el
+            });
         }
     },
     computed: {
diff --git a/src/components/tieredmenu/TieredMenu.vue b/src/components/tieredmenu/TieredMenu.vue
index 1f1dae299d..14f228dc37 100755
--- a/src/components/tieredmenu/TieredMenu.vue
+++ b/src/components/tieredmenu/TieredMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <Teleport :to="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
-            <div :ref="containerRef" :class="containerClass" v-if="popup ? visible : true" v-bind="$attrs">
+            <div :ref="containerRef" :class="containerClass" v-if="popup ? visible : true" v-bind="$attrs" @click="onOverlayClick">
                 <TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick"/>
             </div>
         </transition>
@@ -9,8 +9,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
+import {ConnectedOverlayScrollHandler,DomHandler,OverlayEventBus} from 'primevue/utils';
 import TieredMenuSub from './TieredMenuSub.vue';
 
 export default {
@@ -157,6 +156,12 @@ export default {
         },
         containerRef(el) {
             this.container = el;
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.target
+            });
         }
     },
     computed: {
diff --git a/src/components/utils/OverlayEventBus.js b/src/components/utils/OverlayEventBus.js
new file mode 100644
index 0000000000..844a1b111d
--- /dev/null
+++ b/src/components/utils/OverlayEventBus.js
@@ -0,0 +1,3 @@
+import {EventBus} from 'primevue/utils';
+
+export default EventBus();
\ No newline at end of file
diff --git a/src/components/utils/Utils.js b/src/components/utils/Utils.js
index 87eb125bd6..02358c65b6 100644
--- a/src/components/utils/Utils.js
+++ b/src/components/utils/Utils.js
@@ -3,5 +3,6 @@ import DomHandler from './DomHandler';
 import ObjectUtils from './ObjectUtils';
 import UniqueComponentId from './UniqueComponentId';
 import EventBus from './EventBus';
+import OverlayEventBus from './OverlayEventBus';
 
-export {ConnectedOverlayScrollHandler,DomHandler,ObjectUtils,UniqueComponentId,EventBus};
\ No newline at end of file
+export {ConnectedOverlayScrollHandler,DomHandler,ObjectUtils,UniqueComponentId,EventBus,OverlayEventBus};
\ No newline at end of file
diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
index 32a3e30c9d..f9e5142a47 100755
--- a/src/views/overlaypanel/OverlayPanelDoc.vue
+++ b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -178,7 +178,7 @@ toggle(event) {
 &lt;Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /&gt;
 
 &lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px" :breakpoints="{'960px': '75vw'}"&gt;
-    &lt;DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll"&gt;
+    &lt;DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"&gt;
         &lt;Column field="name" header="Name" sortable style="width: 50%"&gt;&lt;/Column&gt;
         &lt;Column header="Image" style="width: 20%"&gt;
             &lt;template #body="slotProps"&gt;