Skip to content

.p-overflow-hidden not removed from body when closing conditionally displayed modal dialog #19251

@Round0000

Description

@Round0000

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

  1. Open the StackBlitz example above
  2. 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.
  3. Click the button to display the dialog
  4. Notice the scrollbar is hidden and the body not scrollable (as expected in modal state)
  5. Close the dialog
  6. 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

Labels

Type: BugIssue contains a bug related to a specific component. Something about the component is not working

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions