If you're facing an issue with PrimeFaces, the best course of action is to open an issue on their GitHub page so that they can address and resolve the problem effectively.
Alternatively, you can solve your specific problem by modifying the bindCommonEvents function of the OverlayPanel prototype where the dismissable logic is implemented. This modification allows you to prevent the overlayPanel from closing when clicking on a datepicker. Below is the code snippet for this solution (tested with PrimeFaces 6.1):
To implement this change, create a new file named overlayPanelFix.js:
(function() {
PrimeFaces.widget.OverlayPanel.prototype.bindCommonEvents = function(dir) {
var $this = this;
// Code for handling close icon
if (this.cfg.showCloseIcon) {
// Event handlers for close icon
this.closerIcon.on('mouseover.ui-overlaypanel', function() {
$(this).addClass('ui-state-hover');
}).on('mouseout.ui-overlaypanel', function() {
$(this).removeClass('ui-state-hover');
}).on('click.ui-overlaypanel', function(e) {
$this.hide();
e.preventDefault();
}).on('focus.ui-overlaypanel', function() {
$(this).addClass('ui-state-focus');
}).on('blur.ui-overlaypanel', function() {
$(this).removeClass('ui-state-focus');
});
}
// Check for dismissal condition
if (this.cfg.dismissable && !this.cfg.modal) {
// Logic to hide overlay on outside click
var hideNS = 'mousedown.' + this.id;
$(document.body).off(hideNS).on(
hideNS,
function(e) {
// Check overlay visibility
if ($this.jq.hasClass('ui-overlay-hidden')) {
return;
}
// Additional check for datepicker click
var target = $(e.target);
if(target.hasClass('ui-datepicker') || target.parents('.ui-datepicker').length) {
return;
}
// Hide overlay if clicked outside of it
var offset = $this.jq.offset();
if (e.pageX < offset.left || e.pageX > offset.left + $this.jq.outerWidth() || e.pageY < offset.top
|| e.pageY > offset.top + $this.jq.outerHeight()) {
$this.hide();
}
});
}
// Update position on window resize
var resizeNS = 'resize.' + this.id;
$(window).off(resizeNS).on(resizeNS, function() {
if ($this.jq.hasClass('ui-overlay-visible')) {
$this.align();
}
});
}
})();
This modified script includes a new functionality as part of the original function (refer to comments in the script).
Remember to include the following script reference in your facelet:
<h:outputScript name="js/overlayPanelFix.js" />
Always exercise caution when overriding core functionalities like this, especially when upgrading to newer versions of PrimeFaces to ensure smooth operation.