DynamicDialog: ExpressionChangedAfterItHasBeenCheckedError for attr.aria-labelledby

[yarikwest]

Describe the bug

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'attr.aria-labelledby': 'pn_id_157_header'. Current value: 'pn_id_159_header'. Expression location: DynamicDialogComponent component.

aria-labeledby is assign for div with class 'p-dynamic-dialog'

Environment

Basic as possible, Angular + PrimeNG only

Reproducer

https://stackblitz.com/edit/pfqjsp?file=package.json

Angular version

16.2.0

PrimeNG version

16.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

Firefox 116.0

Steps to reproduce the behavior

1. Open dynamic dialog

Expected behavior

No response

[VolodymyrKornetskyi]

The same issue

[johanrg]

Same issue here too.

[chillapp]

The same issue

[SoyDiego]

I was checking the problem and try using changeDetectorRef, but I still have't been able to fix the error.
I will continue trying 👍🏾

[fbobbio]

Same issue here.

@SoyDiego I've just seen this bug. I left this comment on the MR that (I believe) introduced the issue: #13477 (comment)

Is there a need to update the template as per the function change? From the top of my head, the solution would be to bind the template to a property and set it when really needed.

Thanks for the efforts crew.

[SoyDiego]

Hi guys and thanks for your help @fbobbio.
I did a PR solving the problem. You can check here: #13502
I don't know if it's the best solution, but If you find another better, let me know.
I have checked and the problem is solved it and all the things continue working well too
Now we should wait if PrimeNG Team approve it.

[tysoc1222]

Same issue here. In my case, the error continuously fires when trying to open the dialog and hence the dialog never opens and the application hangs

[sergeiglikstein]

My work around, example code that I am working on.
I'll stop using it once the issue is fixed.

import { Injectable } from '@angular/core';
import { DialogService, DynamicDialogComponent } from 'primeng/dynamicdialog';
import { ConfirmDialogComponent } from '../../components/confirm-dialog/confirm-dialog.component';
import { ConfirmDialog } from '../../models/confirm-dialog.model';


@Injectable({
  providedIn: 'root'
})
export class SharedDialogService {
  constructor(public dialogService: DialogService) {}

  openConfirmDialog(data: ConfirmDialog, width?: string) {
    const ref = this.dialogService.open(ConfirmDialogComponent, {
      header: data.title,
      data,
      width: width || '600px',
      dismissableMask: false,
      modal: true
    });

    const dialogRef = this.dialogService.dialogComponentRefMap.get(ref);
    const dynamicComponent = dialogRef?.instance as DynamicDialogComponent;

    const ariaLabelledBy = dynamicComponent.getAriaLabelledBy();
    dynamicComponent.getAriaLabelledBy = () => ariaLabelledBy;
    return ref;
  }
}

[kwood-gmr]

@sergeiglikstein

My work around, example code that I am working on. I'll stop using it once the issue is fixed.

Thank you - this has worked for me

[gucal]

@SoyDiego sent a PR that resolved the issue.
Thanks for report.

[fbobbio]

@SoyDiego sent a PR that resolved the issue. Thanks for report.

@gucal and @SoyDiego thanks!
I think the actions failed due to missing prettier: https://github.com/primefaces/primeng/actions/runs/5901308653

Sent this PR #13511

First time contributing here so I am not sure about the workflow to get a new version/tag published :) Would be good to have this fix available.

Thanks again ✌️

[mountpoint]

in which release will this bug be fixed?

[SoyDiego]

in which release will this bug be fixed?

Wil be in 16.2.1

[gucal]

The current solution has been replaced with a better solution. #13538

[Tilesto]

Just in case) The same error for 16.2.0. Looking forward to 16.2.1)

[SoyDiego]

Just in case) The same error for 16.2.0. Looking forward to 16.2.1)

Yes, will be fixed in next release and the currently 16.2.0 has the problem