Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Potential Bug: p-dialog Leaves p-overflow-hidden Class on <body> After Closing, Preventing Page Scroll #2446

Open
Yassinmoh opened this issue Dec 12, 2024 · 3 comments
Open

Potential Bug: p-dialog Leaves p-overflow-hidden Class on <body> After Closing, Preventing Page Scroll #2446

Yassinmoh opened this issue Dec 12, 2024 · 3 comments
Assignees
@MitchellTCG @WiseQA
Labels
bug

Comments

@Yassinmoh
Copy link

Bug Report

Where was the issue found:

Environment: Production
Browser: Chrome, Firefox

Describe the Issue

When opening a p-dialog and performing an action like "Save," the dialog closes as expected. However, the page becomes unscrollable due to the presence of the p-overflow-hidden class on the <body> tag.

Steps to Reproduce

  1. Open a page with a PrimeNG p-dialog component.

  2. Trigger an action inside the dialog, such as "Save."

  3. Observe that the dialog closes.

  4. Try scrolling the page—scrolling is disabled.

Expected Behavior

After the dialog closes, the p-overflow-hidden class should be removed from the <body> tag, allowing the user to scroll the page.

Additional Context

  • PrimeNG Version: [^17.10.0]

  • Angular Version: [~17.0.0]

  • Node.js Version: [v20.17.0]

Screenshots

Image

Workaround

Temporary Solutions:

  1. CSS Override:
    Add the following CSS to restore the scrolling functionality:
.p-overflow-hidden {
    overflow: initial !important;
}
  1. Remove Class Programmatically:
    Use Angular's Renderer2 service to remove the p-overflow-hidden class from the tag:
import { Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) {}

closeDialog() {
    const body = document.body;
    this.renderer.removeClass(body, 'p-overflow-hidden');
}

These workarounds temporarily resolve the issue until an official fix is provided.
@Yassinmoh Yassinmoh added the bug label Dec 12, 2024
@WiseQA
Copy link

WiseQA commented Dec 12, 2024

QA will review. We have a scroll bar issue that was fixed this Sprint 52 we are currently working and will be resolved this sprint. The CSS issues @MitchellTCG can you please review comments on these. Thanks

@MitchellTCG
Copy link
Contributor

This can't be done in 52. maybe 53 but I need to know what page this happened on.

@AureliaKhorsand
Copy link
Contributor

@Yassinmoh thank you so much for your contribution! We really appreciate your input. Our team has started looking at this, however we have been unable to reproduce the issue. Do you mind clarifying where you saw this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@MitchellTCG MitchellTCG

@WiseQA WiseQA

Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@MitchellTCG @Yassinmoh @AureliaKhorsand @WiseQA