PrimeFaces 8.0：按回车键关闭对话框时Datepicker弹窗未关闭

问题描述 #

在对话框内使用p:datePicker时，在输入框按下回车键，对话框会关闭且数据已保存，但Datepicker的选择弹窗仍处于打开状态，需点击页面其他区域才能关闭；点击对话框的提交或取消按钮时，弹窗会正常消失。调用PF('dateValue123').hide()或.close()时出现错误：

Uncaught TypeError: PF(...).close is not a function

相关代码：

<p:datePicker
    ...
    widgetVar="dateValue123"
    hideOnDateTimeSelect="true"
    onkeydown="if (event.keyCode === 13) {PF('dateValue123').hide()} />

解决方案 #

方案1：调整事件执行顺序，优先隐藏Datepicker弹窗 #

问题根源是回车事件同时触发了对话框的关闭，导致Datepicker的widget实例在调用hide()前已被销毁。需先隐藏弹窗，再执行对话框的提交/关闭逻辑，并阻止默认回车行为避免重复触发：

<p:datePicker
    widgetVar="dateValue123"
    hideOnDateTimeSelect="true"
    onkeydown="if (event.keyCode === 13) {
        // 先检查widget实例是否存在，再调用hide方法
        const datePickerWidget = PF('dateValue123');
        if (datePickerWidget) {
            datePickerWidget.hide();
        }
        // 执行对话框的提交/关闭逻辑，示例：PF('yourDialogWidgetVar').hide();
        // 或触发提交按钮点击：document.getElementById('submitBtnId').click();
        event.preventDefault(); // 阻止默认回车行为，避免重复操作
    }"
/>

方案2：直接操作DOM隐藏弹窗 #

如果widget实例无法正常获取，可通过PrimeFaces Datepicker弹窗的默认样式类ui-datepicker直接隐藏：

<p:datePicker
    widgetVar="dateValue123"
    hideOnDateTimeSelect="true"
    onkeydown="if (event.keyCode === 13) {
        $('.ui-datepicker').hide();
        // 执行对话框的提交/关闭逻辑
        event.preventDefault();
    }"
/>

注意事项 #

• 确保widgetVar名称拼写正确，且对话框未提前销毁Datepicker组件；
• 若对话框的提交逻辑是通过回车默认触发，需调整事件优先级，避免Datepicker实例被提前销毁。

内容的提问来源于stack exchange，提问作者Robertt