Primeng: ConfirmDialog - ExpressionChangedAfterItHasBeenCheckedError (when used with p-checkbox)

[fxmfr]

I'm submitting a ...

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)

http://plnkr.co/edit/w9xuZEmNzV5HM5fez8hs?p=preview

Current behavior
ExpressionChangedAfterItHasBeenCheckedError is thrown when confirm dialog is opened from p-checkbox event. Probably other components (dropdown, input switch) are affected as well - see #4139 for details/example.

Expected behavior
Showing the confirm dialog should not throw ExpressionChangedAfterItHasBeenCheckedError.

Minimal reproduction of the problem with instructions
In plunker above, toggle checkbox and take a look at the console.

What is the motivation / use case for changing the behavior?
Avoid ExpressionChangedAfterItHasBeenCheckedError.

Please tell us about your environment:
Windows 10

• Angular version: 5.0.0

• PrimeNG version: 5.0.2

• Browser: Chrome 63

• Language: TypeScript 2.6.2

[cagataycivici]

Try with Angular 5.2.x please.

[JacobSiegle]

Having the same issue on Angular 5.2.X using Primeng 5.2.0-rc.2 from input switch. Tried his plunker replacing 5.0.0 with 5.2.0 and got the same result.

http://plnkr.co/edit/mBxNY8ct9oVW92YGDGVc?p=preview

[tbertran]

Updated Plunker to latest releases of Angular (5.2.3) and PrimeNG (5.2.0) and still getting the error
http://plnkr.co/edit/3m5FiVGGn9B7PjA9qSEg?p=preview

[brian428]

Same error here. Important to note that it works fine with PrimeNG 5.0.2. Only 5.2 is now throwing these errors.

[brian428]

@cagataycivici just wanted to point out that this issue (also noted in #5004) is completely blocking us from upgrading to 5.2. It's affecting virtually all of our Dialogs.

[cinnest]

Same problem here. As brian428 mentioned, the problem came with the upgrade to PrimeNG (5.2.0) and affects our Dialogs as well.

[brian428]

Appears to be caused by #4686.

[polakv93]

This is probably angular issue https://github.com/angular/angular/issues/6005#issuecomment-165905348
I had similar problem and after enableProdMode( ) system doesn't throw an error.

[brian428]

As I said in the other thread: I don't think so. Prod mode doesn't do the check for values changing while change detection is happening, but that doesn't mean it isn't happening. Just that the error isn't being thrown. The PrimeNG code needs to change to ensure that values aren't changing during change detection (which didn't start happening until PrimeNG 5.2).

[cagataycivici]

https://github.com/primefaces/primeng/issues/5004

[ARandomDude]

I still get this error. #5004 does not fix it.
(See: http://plnkr.co/edit/bDUXw6Cs7X24CmWkirtQ (PrimeNG 5.2.3))

[ARandomDude]

I've got a workaround/fix for this. You can monkey-patch the ConfirmDialog like the this:

ConfirmDialog.prototype.ngAfterViewChecked = function () {
    if (this.executePostShowActions) {
        setTimeout(() => {
            this.domHandler.findSingle(this.el.nativeElement.children[0], 'button').focus();
            this.executePostShowActions = false;
        }, 0);
    }
}

Just put this code into one of your TS files.

[joelr2m]

Any update on this? I get this one a hotspot checkbox which crashes the whole application.

[ESubrado]

I once got "ExpressionChangedAfterItHasBeenCheckedError" when firing p-confirmDialog on dropdown. What i did is to just add [ConfirmationService] as a provider to the component page where p-confirmDialog exists.

This is supposed to be working if this is added to the app.module, but I guess due to complexity of code, the build wasn't able to detect that.