PrimeNG下拉框切换选项时页面偏移问题求助

在Angular项目中用PrimeNG的p-dropdown作为Datatable筛选组件时，出现页面偏移异常：

• 下拉框位于页面右侧时，切换选中值会触发页面向左偏移约10px；
• 下拉框位于页面左侧时，切换选中值会触发页面向右偏移；
• 首次点击下拉框无此问题，仅切换选中值时出现。

技术环境：Angular v13.3.8，PrimeNG v13.4.1，Angular CLI项目

相关代码：

<p-dropdown 
id="ListFilter_priority_dropdown" 
inputId="ListFilter_priority_dropdown_input" #priorityDropdown 
styleClass="my-form-control" [options]="prioritySelectItems" 
[showClear]="true" placeholder="Select" 
(onChange)="filter($event.value)" appendTo="body"> 
<ng-template let-option pTemplate="item"> 
<div id="ListFilter_priority_item_container"> 
<span id="ListFilter_priority_dropDown_{{option.label}}">{{option.label}}</span>
 </div> 
</ng-template> 
</p-dropdown>

已尝试方案：调整body定位属性（absolute、static、relative等），修改下拉框appendTo属性，均未解决。

1. 阻止切换后的自动焦点 #

PrimeNG下拉框切换选项后会自动聚焦输入框，可能触发页面滚动偏移。在筛选逻辑中手动移除焦点：

filter(value: any) {
  // 你的筛选业务逻辑
  setTimeout(() => {
    const inputEl = document.getElementById('ListFilter_priority_dropdown_input');
    inputEl?.blur();
  }, 0);
}

2. 锁定页面横向滚动 #

检查页面滚动容器（如body或外层容器）的溢出设置，添加样式锁定横向宽度：

body {
  overflow-x: hidden;
  width: 100vw;
}

3. 调整下拉框挂载目标 #

移除appendTo="body"，让下拉框挂载在父容器内，同时给父容器设置相对定位：

<!-- 移除appendTo="body"属性 -->
<p-dropdown 
id="ListFilter_priority_dropdown" 
inputId="ListFilter_priority_dropdown_input" #priorityDropdown 
styleClass="my-form-control" [options]="prioritySelectItems" 
[showClear]="true" placeholder="Select" 
(onChange)="filter($event.value)"> 
<!-- 模板内容不变 -->
</p-dropdown>

父容器样式：

.dropdown-parent {
  position: relative;
  overflow: visible;
}

4. 覆盖下拉面板默认样式 #

检查下拉面板的边距、宽度设置，避免触发页面宽度计算异常：

.p-dropdown-panel {
  margin: 0 !important;
  min-width: auto !important;
}

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