PrimeFaces DatePicker 组件在移动端多选模式下的JS错误分析与修复

在PrimeFaces 15.0.0版本中，DatePicker组件在移动设备上启用多选模式（selectionMode="multiple"）时存在一个严重的JavaScript错误。当用户在移动视图下尝试选择多个日期时，日期选择弹窗会异常关闭，同时浏览器控制台会抛出"Maximum call stack size exceeded"的调用栈溢出错误。

问题现象

开发者在移动端使用DatePicker组件时发现：

1. 每次选择日期后弹窗会立即关闭，无法实现多选功能
2. 浏览器控制台出现递归调用导致的堆栈溢出错误
3. 错误追踪显示问题出在jQuery和datepicker.js的交互过程中

技术分析

这个问题的本质是事件处理逻辑中的递归调用问题。在移动端模式下（touchUI=true），当用户选择一个日期时，组件的onInputChange事件处理器会触发一系列连锁反应：

1. 日期选择触发value变更事件
2. 变更事件又触发新的onInputChange调用
3. 这种循环调用没有正确的终止条件
4. 最终导致JavaScript调用栈耗尽

这种递归调用问题在桌面模式下不会出现，因为桌面版本的事件处理流程有所不同。移动端特有的touchUI实现方式与多选模式的交互产生了冲突。

解决方案

PrimeFaces团队已经确认该问题并在15.0.1版本中修复。修复方案主要涉及：

1. 重构事件处理逻辑，避免无限递归
2. 确保移动端多选模式下的正确事件流
3. 保持与桌面版本一致的行为模式

开发者可以通过以下方式验证修复效果：

• 在移动视图下测试多选功能
• 确认可以连续选择多个日期而不关闭弹窗
• 检查控制台不再出现调用栈错误

影响范围

该问题影响所有使用以下配置的场景：

• PrimeFaces 15.0.0版本
• DatePicker组件设置selectionMode="multiple"
• 在移动设备或模拟移动视图中使用
• 启用了touchUI模式（默认在移动设备上启用）

临时解决方案

对于无法立即升级到15.0.1版本的项目，可以考虑：

1. 禁用移动端的多选功能
2. 使用自定义JavaScript拦截错误事件
3. 实现替代的多选日期方案

总结

这个案例展示了前端组件在不同设备环境下可能出现的特殊问题。PrimeFaces团队快速响应并修复了这个移动端特有的交互问题，体现了该框架对跨平台兼容性的重视。开发者在实现日期多选功能时，应当特别注意移动端和桌面端的测试覆盖，确保功能在所有平台上都能正常工作。

对于使用PrimeFaces的开发团队，建议在升级到15.0.1版本后，全面测试所有DatePicker组件的多选功能，特别是在移动设备上的表现。