Dropdown in Table Filter Menu Fails to Apply Filter When appendTo="body" Is Used

[tosdan-projects]

Describe the bug

I'm encountering an issue with a Table component that utilizes filters in the form of a Menu (display="menu"). One of the filters employs a custom template with a p-dropdown component. The issue arises when I add appendTo="body" to the p-dropdown configuration, resulting in the filter ceasing to function properly. Specifically, the dropdown menu can be opened, but selecting an item merely closes the dropdown without applying the selected filter.

To illustrate this issue, I've prepared an example by forking the PrimeNG documentation and simplifying it for clarity. Attached below is a video recorded based on this example, demonstrating the expected behavior (when appendTo=body is not applied, the filter functions correctly) versus the problematic behavior observed when appendTo=body is applied.

https://stackblitz.com/edit/zkbrkx?file=src%2Fapp%2Fdemo%2Ftable-filter-menu-demo.html

2024-04-08_18-59-50_PrimeNG_TableFilterMenuDemo_-_StackBlitz_-_Google_Chrome.mp4

Environment

Windows 10
Node 20.11
Typescript 5.3.3
Angular 17.3

Reproducer

https://stackblitz.com/edit/zkbrkx?file=src%2Fapp%2Fdemo%2Ftable-filter-menu-demo.html

Angular version

17.3.1

PrimeNG version

17.12.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.0

Browser(s)

Chrome 123

Steps to reproduce the behavior

1. Fork the example provided in PrimeNG docs for Table with Filter Menu https://primeng.org/table#filter-menu
2. In the template for the column Status, add the property appendTo="body" to the p-dropdown component
3. in the preview window click on the status filter button select any value from list of values for the filter

Expected behavior

No response

[nickshoe]

+1