vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Prevent calendar hiding the filter menu

pull/973/head
Cagatay Civici 2021-02-08 10:57:24 +03:00
parent af4c2087c9
commit 6c7d36e24b
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/datatable/ColumnFilter.vue
View File

@ -8,7 +8,7 @@
@click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button> @click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
<button v-if="showMenuButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button> <button v-if="showMenuButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave"> <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape"> <div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick">
<component :is="filterHeader" :field="field" /> <component :is="filterHeader" :field="field" />
<template v-if="display === 'row'"> <template v-if="display === 'row'">
<ul class="p-column-filter-row-items"> <ul class="p-column-filter-row-items">
@ -120,6 +120,7 @@ export default {
} }
}, },
overlay: null, overlay: null,
selfClick: false,
beforeUnmount() { beforeUnmount() {
if (this.overlay) { if (this.overlay) {
this.$el.appendChild(this.overlay); this.$el.appendChild(this.overlay);
@ -299,6 +300,9 @@ export default {
hide() { hide() {
this.overlayVisible = false; this.overlayVisible = false;
}, },
onContentClick() {
this.selfClick = true;
},
onOverlayEnter() { onOverlayEnter() {
document.body.appendChild(this.overlay); document.body.appendChild(this.overlay);
this.overlay.style.zIndex = String(DomHandler.generateZIndex()); this.overlay.style.zIndex = String(DomHandler.generateZIndex());
@ -319,18 +323,16 @@ export default {
overlayRef(el) { overlayRef(el) {
this.overlay = el; this.overlay = el;
}, },
isOutsideClicked(event) { isTargetClicked(event) {
return !(this.overlay.isSameNode(event.target) || this.overlay.contains(event.target) return this.$refs.icon && (this.$refs.icon === event.target || this.$refs.icon.contains(event.target));
|| this.$refs.icon.isSameNode(event.target) || this.$refs.icon.contains(event.target)
|| DomHandler.hasClass(event.target, 'p-column-filter-add-button') || DomHandler.hasClass(event.target.parentElement, 'p-column-filter-add-button')
|| DomHandler.hasClass(event.target, 'p-column-filter-remove-button') || DomHandler.hasClass(event.target.parentElement, 'p-column-filter-remove-button'));
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
if (!this.outsideClickListener) { if (!this.outsideClickListener) {
this.outsideClickListener = (event) => { this.outsideClickListener = (event) => {
if (this.isOutsideClicked(event)) { if (this.overlayVisible && !this.selfClick && !this.isTargetClicked(event)) {
this.hide(); this.overlayVisible = false;
} }
this.selfClick = false;
}; };
document.addEventListener('click', this.outsideClickListener); document.addEventListener('click', this.outsideClickListener);
} }