Fixed #729 - BUG: Calendar navigation (next, prev month) inside DataTable or OverlayPanel not working

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,21 +126,26 @@ 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) {
+        isOutsideClicked() {
-            return !this.$el.contains(event.target) && !this.$el.isSameNode(event.target);
+            return !this.selfClick;
         },
         onClick(event) {
-            if (this.editMode === 'cell' && this.isEditable() && !this.d_editing) {
+            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) {
             let completeEvent = {

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() {