From a6bbdfbd53d779fe36508fb328cdb35e1e24e095 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 9 Dec 2020 18:49:41 +0300
Subject: [PATCH] Fixed  #729 - BUG: Calendar navigation (next, prev month)
 inside DataTable or OverlayPanel not working

---
 src/components/datatable/BodyCell.vue        | 21 +++++++++++++-------
 src/components/overlaypanel/OverlayPanel.vue | 10 ++++++++--
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index 68ef52a04..abacc9ab5 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/src/components/datatable/BodyCell.vue
@@ -70,6 +70,7 @@ export default {
         }
     },
     documentEditListener: null,
+    selfClick: false,
     data() {
         return {
             d_editing: this.editing
@@ -112,9 +113,10 @@ export default {
         bindDocumentEditListener() {
             if (!this.documentEditListener) {
                 this.documentEditListener = (event) => {
-                    if (this.isOutsideClicked(event)) {
+                    if (this.isOutsideClicked()) {
                         this.completeEdit(event, 'outside');
                     }
+                    this.selfClick = false;
                 };
 
                 document.addEventListener('click', this.documentEditListener);
@@ -124,20 +126,25 @@ export default {
             if (this.documentEditListener) {
                 document.removeEventListener('click', this.documentEditListener);
                 this.documentEditListener = null;
+                this.selfClick = false;
             }
         },
         switchCellToViewMode() {
             this.d_editing = false;
             this.unbindDocumentEditListener();
         },
-        isOutsideClicked(event) {
-            return !this.$el.contains(event.target) && !this.$el.isSameNode(event.target);
+        isOutsideClicked() {
+            return !this.selfClick;
         },
         onClick(event) {
-            if (this.editMode === 'cell' && this.isEditable() && !this.d_editing) {
-                this.d_editing = true;
-                this.bindDocumentEditListener();
-                this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index});
+            if (this.editMode === 'cell' && this.isEditable()) {
+                this.selfClick = true;
+
+                if (!this.d_editing) {
+                    this.d_editing = true;
+                    this.bindDocumentEditListener();
+                    this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index});
+                }
             }
         },
         completeEdit(event, type) {
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index 23c9c23a5..9be1300ae 100755
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/src/components/overlaypanel/OverlayPanel.vue
@@ -1,7 +1,7 @@
 <template>
     <transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave">
         <div class="p-overlaypanel p-component" v-if="visible" :ref="containerRef">
-            <div class="p-overlaypanel-content">
+            <div class="p-overlaypanel-content" @click="onContentClick">
                 <slot></slot>
             </div>
             <button class="p-overlaypanel-close p-link" @click="hide" v-if="showCloseIcon" :aria-label="ariaCloseLabel" type="button" v-ripple>
@@ -48,6 +48,7 @@ export default {
             visible: false
         }
     },
+    selfClick: false,
     target: null,
     outsideClickListener: null,
     scrollHandler: null,
@@ -81,6 +82,9 @@ export default {
         hide() {
             this.visible = false;
         },
+        onContentClick() {
+            this.selfClick = true;
+        },
         onEnter() {
             this.appendContainer();
             this.alignOverlay();
@@ -119,9 +123,10 @@ export default {
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
-                    if (this.visible && this.container && !this.container.contains(event.target) && !this.isTargetClicked(event)) {
+                    if (this.visible && !this.selfClick && !this.isTargetClicked(event)) {
                         this.visible = false;
                     }
+                    this.selfClick = false;
                 };
                 document.addEventListener('click', this.outsideClickListener);
             }
@@ -130,6 +135,7 @@ export default {
             if (this.outsideClickListener) {
                 document.removeEventListener('click', this.outsideClickListener);
                 this.outsideClickListener = null;
+                this.selfClick = false;
             }
         },
         bindScrollListener() {