Menu: popup overflows viewport when placed at right or bottom edge
Describe the bug
When a p-menu component with thepopup attribute set to true is positioned at the right or bottom edge of the viewport, the popup menu expands beyond the visible area instead of staying within the viewport.
Pull Request Link
No response
Reason for not contributing a PR
- [x] Lack of time
- [x] Unsure how to implement the fix/feature
- [ ] Difficulty understanding the codebase
- [ ] Other
Other Reason
No response
Reproducer
https://stackblitz.com/edit/stackblitz-starters-gxadrxk2
Environment
Windows
Angular version
21.0.3
PrimeNG version
v21
Node version
24.11.1
Browser(s)
No response
Steps to reproduce the behavior
- Add a
p-buttonandp-menuelement withpopup="true"inside adiv. - Attach the menu toggle method to the click handler of the button.
- Align the
divon the right or bottom side of the screen (e.g.position="absolute"; right: 0") - Click on the button
- The menu expands to the bottom right, showing partially outside of the viewport (regardless of
appendTo).
Expected behavior
When a menu is positioned on the edge of the viewport, the menu should expand inwards. This used to work in at least v19 and occurred after upgrading Angular and PrimeNG to v21.
I have the same issue. Couple minutes ago I have migrated from "primeng": "20.1.2" (it worked fine) to "primeng": "21.0.1".
I have same issue, tieredmenu seems to work properly