html - Hacer clic en el desplegable mueve el cuerpo de la página. primeng

Tengo 2 menús desplegables en Datatables para filtrar el contenido y tengo un error. Cuando un menú desplegable está en el lado derecho de la página, desplaza la página hacia la izquierda aproximadamente 10 px. Y en el caso opuesto, cuando el menú desplegable está a la izquierda, desplaza la página hacia la derecha. Con el primer clic no pasa nada, pero solo cuando intento cambiar el valor seleccionado.

<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>

Angular v 13.3.8 Versión de PrimeNG 13.4.1 Compilación/Ejecución - Aplicación Angular CLI

Ya he intentado jugar con la posición del "body" - absoluta, estática, relativa, y s.o., pero no funciona tan bien como cambiar la propiedad "appendTo" del menú desplegable.

Respuesta #1

Esto parece un error no resuelto con el componente p-dropdown de PrimeNG. Otras personas están teniendo este problema:

https://github.com/primefaces/primeng/issues/10992

https://github.com/primefaces/primeng/issues/11046

Sin embargo, pude superar el problema en PrimeNG 14.1.2 agregando [virtualScroll]="true" al componente p-dropdown, y también agregando un ancho mínimo al panel desplegable con la propiedad [panelStyle]="{ 'min-width': 'min(100vw, 250px)' }"

Otra situación que puede estar causando esto es si estás usando appendTo="body" y el body tiene overflow: hidden o overflow-x: hidden pero tiene hijos que desbordan horizontalmente.

Si estás usando appendTo="body", intenta configurar el overflow en auto y verifica si tienes una barra de desplazamiento horizontal. Si la tienes, esto puede estar causando el problema. Para solucionarlo, o bien maneja los elementos hijos que desbordan, o establece overflow: hidden/overflow-x: hidden en un elemento hijo del body.