如何避免 p 下拉列表在正文滚动时关闭，除了 appendTo= "body"

Question

我使用的是Angular版本12和PrimeNG版本12。同样，我使用primeng下拉菜单，它在滚动body时关闭。使用appendTo ="body"不会关闭滚动时的下拉菜单，但会移动下拉面板。很多人都遇到过这个问题，但我还没有找到任何解决方法。

<div class="customScroll">
<p-dropdown
filter="true"
[options]="options" 
[(ngModel)]="model" 
(onChange)="filterTable()"
[style]="{'width': '100%', 'margin-top': '10px', 'font-family': 'Roboto Regular'}"
>
</p-dropdown>
</div>

Answer 1

您需要使用PrimeNG的appendTo="body"属性

Answer 2

您可以通过传递overlayOptions来修补这个问题

[overlayOptions]="getOverlayOptions()"

定义为:

getOverlayOptions(): OverlayOptions {
return {
listener: (event: Event, options?: OverlayListenerOptions) => {
return false;
}
};
}

如果有人关心这个补丁背后的故事:
你会注意到，当在他们的网站上测试他们的组件时，它不会发生，我高度怀疑有人在阻止滚动事件传播来隐藏一个bug，因为当我克隆他们的项目，并在他们自己的项目中，我做了一个新的容器，有一个滚动条，同样的意外行为发生。
无论如何，在进一步检查源代码后，您将发现一行关于滚动侦听器的奇怪行，如:

x || y 

都有副作用，只有当第一个返回值为false时，第二个才会执行。我没有时间给出确切的文件和行号，因为解决这个问题是一个相当长的过程。

Answer 3

我做了很多研究，但没有发现任何东西。

但是这个问题已经在最新的ngPrime版本14.0.0中修复了