Menu closes itself immediately when the menu and its button toggle is inside ShadowDom

[hyilai]

Describe the bug

p-menu cannot be opened when the menu and its button toggle is inside ShadowDom encapsulation. The menu closes itself right away.

This seems to be caused by bindDocumentClickListener. Inside the shadow dom, event.target will be the shadow root even if the button itself is clicked, so isOutsideContainer‎ and isOutsideTarget are always true. It might need to check if the event is composed and if the toggle element contains the first element of the event's composed path (event.composed ? toggleElement.contains(event.composedPath()[0]) : toggleElement.contains(event.target)).

Environment

Angular app with PrimeNG

Reproducer

https://stackblitz.com/edit/github-fhq1jp?file=src%2Fapp%2Fapp.component.html

Angular version

17.3.7

PrimeNG version

17.18.8

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

21.7.1

Browser(s)

No response

Steps to reproduce the behavior

• Create a component with a popup p-menu and button to toggle the menu.
• Wrap that component around with another component that has ShadowDom encapsulation.
• In primeng-menu.mjs, put a debug point inside the hide() function.
• Click on the button. The debug point will pause inside hide().
• The menu is visible when the debug point is paused. After the debug point resumes, the menu will disappear.

Expected behavior

p-menu should stay opened.