Fixed #1041 - Improve the interaction of nested overlays

primefaces · Mar 2, 2021 · 8c92278 · 8c92278
1 parent d51cc96
commit 8c92278
Show file tree

Hide file tree

Showing 14 changed files with 102 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,16 +1,15 @@
 <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>
     </Teleport>
 </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
@@ -0,0 +1,3 @@
+import {EventBus} from 'primevue/utils';
+
+export default EventBus();
diff --git 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};
+export {ConnectedOverlayScrollHandler,DomHandler,ObjectUtils,UniqueComponentId,EventBus,OverlayEventBus};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import {EventBus} from 'primevue/utils';

		export default EventBus();