-
Notifications
You must be signed in to change notification settings - Fork 5k
.p-overflow-hidden not removed from body when closing conditionally displayed modal dialog #19251
Description
Describe the bug
Since updating our Angular and PrimeNG packages to major version 21 (precisely PrimeNG 21.0.2 at the moment), all our modal dialogs present an unexpected behaviour. When dialog is opened the body scroll is blocked as expected, however when closed the body does not come back to a scrollable state.
The context is specifically related to a p-dialog, wrapped in an @if block, and a property in our component which handles the state (visible/hidden) of the dialog.
@if (isDialogVisible) {
<p-dialog header="My dialog" [modal]="true" [(visible)]="isDialogVisible">
<p>My dialog content</p>
</p-dialog>
}
Pull Request Link
No response
Reason for not contributing a PR
- Lack of time
- Unsure how to implement the fix/feature
- Difficulty understanding the codebase
- Other
Other Reason
No response
Reproducer
https://stackblitz.com/edit/stackblitz-starters-kmcldnpx?file=src%2Fmain.ts
Environment
Local dev environment
Angular version
21
PrimeNG version
v21
Node version
22
Browser(s)
Chrome 143
Steps to reproduce the behavior
- Open the StackBlitz example above
- Notice a button that toggles a boolean property, which is used in the template @if statement, and as value of the "visible" property of the p-dialog. Notice aswell that page content is higher than viewport, therefore by default the body is scrollable.
- Click the button to display the dialog
- Notice the scrollbar is hidden and the body not scrollable (as expected in modal state)
- Close the dialog
- Notice the scrollbar is still hidden and the body still not scrollable. The ".p-overflow-hidden" class is still present on the body element.
Expected behavior
As soon as the p-dialog is destroyed, the ".p-overflow-hidden" should be automatically removed from the body, aswell as the complementary "--p-scrollbar-width: 15px;" style property. The body should become scrollable again.
Metadata
Metadata
Assignees
Labels
Type
Projects
Status