Primeng: ExpressionChangedAfterItHasBeenCheckedError - When showing a ConfirmDialog in response to a dropdown value selected

[UrzaUrza]

I'm submitting a ...

[X] bug report
[ ] feature request
[ ] support request

Plunkr Case (Bug Reports)
Tried to create a plunkr but i got a "Unhandled Promise rejection: Template parse errors: 'p-confirmDialog' is not a known element" error and got no more time to investigate it.

Current behavior
On my page, there is a p-dropdown.
When a value is selected, I open a p-confirmDialog to warn the user that some datas could be lost.
When the confirm dialog show up, i have the following error in the console:

"Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'."

Expected behavior
No error in the console

Workaround/hint
The culprit variable seems to be "focus".
Modify dropdown.ts, replace the method:

onInputBlur(event) {
        this.focus = false;
        this.onModelTouched();
        this.onBlur.emit(event);
} 

with

onInputBlur(event) {
        setTimeout(() => {
           this.focus = false;
           this.onModelTouched();
           this.onBlur.emit(event);
        });
} 

• Angular version: 4.4.4

• PrimeNG version: 4.2.2

• Browser: [Chrome ]

• Language: [TypeScript]

[cagataycivici]

Unable to replicate, please provide a test case based on plunkr below and we'll review again.

http://plnkr.co/edit/6q5v84DWolH6DeAdi70w?p=info

[rezord]

I have the same issue. I have created a test case:
http://plnkr.co/edit/aNtTSjBF5As641tz61Xe?p=info

[UrzaUrza]

Thank rezord, that is exactly my issue.

[narutomxc]

I have the same issue. @UrzaUrza @rezord

Please fix it, @cagataycivici

[ki2ga]

Same issue with angular 4.4.6 and primeng 4.3.0

[daniloarcidiacono]

I'm facing the same issue when showing a confirm dialog after the user interacts with a p-inputSwitch.

Angular 5.0.3 with PrimeNG 4.3.0.

After a quick upgrade to PrimeNG 5.0.2 it seems that this issue has not been fixed yet, any updates on that @cagataycivici?

[cagataycivici]

Have you tried Angular 5.2.x?

[kshetline]

I'm having the same problem. I'm using PrimeNG 5.2.0 and Angular 5.2.0.

The weird thing is that I didn't have this bug until I took an old project and moved it into an Angular CLI project. Why that should make any difference, I have no idea.

[bobbydowling]

Same with PrimeNG 5.2.0 and Angular 5.2.5.

[kshetline]

The ExpressionChangedAfterItHasBeenCheckedError bug seemed to have gone away for me briefly, but it came back. I found this workaround that I'm not crazy about, but it seems to get the job done for me for now:

// Patches for PrimeNG focus bugs.
import { Dropdown, RadioButton } from 'primeng/primeng';

const originalDropdownOnInputFocus = Dropdown.prototype.onInputFocus;
Dropdown.prototype.onInputFocus = function(event: any): void {
  setTimeout(() => {
    originalDropdownOnInputFocus.call(this, event);
  });
};

const originalRadioButtonOnFocus = RadioButton.prototype.onFocus;
RadioButton.prototype.onFocus = function(event: any): void {
  setTimeout(() => {
    originalRadioButtonOnFocus.call(this, event);
  });
};

This is not meant to be an exhaustive fix, it merely fixes the specific problems I had in my own app with focus on a p-dropdown and a p-radioButton.

[graphicsxp]

same issue with angular 5.2.9 and primeng 5.2.3

why is this closed ?