Primefaces 6.1可滚动p:dataTable内p:selectOneMenu滚动错位问题求解

该问题是Primefaces 6.1版本中overlay类组件在滚动容器内的已知定位缺陷，可按以下步骤修复：

• 第一步：正确配置appendTo属性
  p:selectOneMenu的下拉面板默认挂载到页面<body>节点，和可滚动表格属于不同的滚动上下文，因此表格滚动时面板位置固定。需要将appendTo属性指定为当前表格的滚动容器节点，让下拉面板和表格使用同一个滚动上下文：

<p:selectOneMenu id="myItem" widgetVar="item#{table.rowIndex}"
    filter="true" filterMatchMode="contains"
    appendTo="@(#myForm\\:myTable .ui-datatable-scrollable-body)"
    style="display: block; margin-top: 15px; margin-right: 15px; width: 520px;">
    <f:selectItem id="selectItemEmpty3" itemLabel="blahblah" itemValue="" />
    <f:selectItems id="myItems" value="#{bean.getValue()}" />
    ...
</p:selectOneMenu>

如果不想转义JSF ID中的冒号，也可以给p:dataTable添加styleClass="my-scroll-table"，之后appendTo写为@(.my-scroll-table .ui-datatable-scrollable-body)即可。

• 第二步：添加自定义样式解决内容不可见问题
  挂载后看不到选项是因为可滚动表格的容器默认设置了overflow: auto，会裁剪超出容器边界的内容，添加以下全局样式即可修复：

/* 保证下拉面板层级足够 */
.ui-selectonemenu-panel {
    z-index: 1000 !important;
}
/* 只保留表格纵向滚动，横向允许内容溢出显示 */
.ui-datatable-scrollable-body {
    overflow-x: visible !important;
    overflow-y: auto !important;
}

• 可选：极端场景适配
  如果修改后仍存在下拉面板定位偏移的问题，可以在页面添加以下JS代码，监听表格滚动事件，当下拉面板展开时实时校准位置：

$(document).ready(function() {
    PF('myTable').getScroller().on('scroll', function() {
        $('.ui-selectonemenu-panel:visible').each(function() {
            const trigger = $(this).prev('.ui-selectonemenu');
            $(this).position({
                my: 'left top',
                at: 'left bottom',
                of: trigger
            });
        });
    });
});

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