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.

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

Component: DynamicDialog not working with zonejs less application #16402

Open
Trolejbus opened this issue Sep 18, 2024 · 4 comments · May be fixed by #17123
Open

Component: DynamicDialog not working with zonejs less application #16402

Trolejbus opened this issue Sep 18, 2024 · 4 comments · May be fixed by #17123
Labels
Resolution: Help Wanted Issue or pull request requires extra help and feedback
Milestone

Comments

@Trolejbus
Copy link

Trolejbus commented Sep 18, 2024

Describe the bug

I am not sure if PrimeNg lib is adapted to work with zonejs less Angular application (with provideExperimentalZonelessChangeDetection()), but if so than after closing dynamic dialog with overlay mask behind it, dialog is correctly closed, but overlay is not destroyed from html.

Environment

Windows/Chrome 128.0.6613.138

Reproducer

https://stackblitz.com/edit/stackblitz-starters-tpcpxh?file=src%2Fmain.ts

Angular version

18.0.2

PrimeNG version

17.18.10

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.10.0

Browser(s)

Chrome 128.0.6613.138

Steps to reproduce the behavior

  1. Navigate to provided stackblitz
  2. Click "Open dialog" button.
  3. Close dialog.
  4. Click "Open dialog" button again. - it should not be possible since overlay is not allowing to click button.

Uncommenting commented code fixes issue.

Expected behavior

Overlay should be destroyed after closing dialog.

@Trolejbus Trolejbus added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 18, 2024
@juanchavezlive
Copy link

Same error here. Had to remove Zoneless support

@Trolejbus
Copy link
Author

Same error here. Had to remove Zoneless support

Hey, you can check my example. In this particular issue you can trigger change detection manually as a potential workaround for this issue :)

@Bock92
Copy link

Bock92 commented Nov 6, 2024

Hi guys, I found another solution about this issue:

Suppose to have a method that called this line of code:
this.dialogService.open<LoaderComponent>(LoaderComponent, { data: {...} });

Inside the LoaderComponent inject the DynamicDialogConfig and implement the OnDestroy interface with the following line of code: this.dynamicDialogRef.destroy();

This will clean and remove from the DOM the dialog in a proper way.

This solution allows you to open a modal directly from an Angular Service, NgRx Signal Store, or other non-component contexts, where ChangeDetectorRef isn't accessible.

@mertsincan mertsincan added Resolution: Help Wanted Issue or pull request requires extra help and feedback and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Nov 19, 2024
Copy link

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨

@mertsincan mertsincan added this to the Future milestone Nov 19, 2024
@github-project-automation github-project-automation bot moved this to Review in PrimeNG Dec 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Help Wanted Issue or pull request requires extra help and feedback
Projects
Status: Review
Development

Successfully merging a pull request may close this issue.

4 participants