Dialog causes ExpressionChangedAfterItHasBeenCheckedError

[candy4290]

I'm submitting a ... (check one with "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)**
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

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

**Current behavior**
<!-- Describe how the bug manifests. -->
when i open a datatable in a dialog through a button.  Erro happened: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ui-inputwrapper-filled: undefined'. Current value: 'ui-inputwrapper-filled: true'.
when i delete  [rowsPerPageOptions]="[10, 20, 50]" in my code . the error disappear. Besides, if i open the datatable directorily, the error disappear.  I can't find the solution. 

**Expected behavior**
<!-- Describe what the behavior would be without the bug. -->
when i open datatable in a dialog , and i use  [rowsPerPageOptions]="[10, 20, 50]"  , this error disappear.
**Minimal reproduction of the problem with instructions**
<!--
If the current behavior is a bug or you can illustrate your feature request better with an example, 
please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
-->

**What is the motivation / use case for changing the behavior?**
<!-- Describe the motivation or the concrete use case -->

**Please tell us about your environment:**
<!-- Operating system, IDE, package manager, HTTP server, ... -->
window4  64
visual studio code 1.17.2
* **Angular version:** 2.0.X
<!-- Check whether this is still an issue in the most recent Angular version -->
Angular version: 5.2.1,

* **PrimeNG version:** 2.0.X
<!-- Check whether this is still an issue in the most recent Angular version -->
PrimeNG version:5.2.0-rc.2
* **Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
<!-- All browsers where this could be reproduced -->
 chrom  63.0.3239.132
* **Language:** [all | TypeScript X.X | ES6/7 | ES5]
typescript:2.6.2
* **Node (for AoT issues):** `node --version` =   
v9.1.0

[candy4290]

when i open a datatable in a dialog ,this error appeared. If i don open datatable in a dialog ,this error disappear, Or if i delete [rowsPerPageOptions]="[10, 20, 50]" in my code. this error disappear.

[candy4290]

in 5.0.2 version, this error disapper

[negberts]

We have the same problem, without using datatables. For us some Angular Material styles are giving the error. Reverting PrimeNG to 5.0.2 removed the error. I think it should be found in the dialog component, not in the datatable

[awallat]

I have the same problem with a listbox inside a dialog. I've created a plunkr for this:
http://plnkr.co/edit/dItBAViJN8fZEzacvwpe?p=preview

[palamethos]

I get a very similar error on form inputs on a dialog after upgrading to PrimeNG 5.2 and Angular 5.2 on the Barcelona theme. If my first input is a dropdown or an autocomplete element on the dialog I get
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ui-inputwrapper-focus: false'. Current value: 'ui-inputwrapper-focus: true'
but if it is a normal text input it is fine.

It seems like the first input element on the form get's auto focused on the dialog opening and that is causing the issue in my case, don't think it auto focused on 5.02

[vigalo]

Same problem as @palamethos with Ultima theme and form inputs on dialogs.

[brian428]

I'm getting the same error, but for ui-inputwrapper-focus. I assume it's the same problem though.

[walter-psjr]

Same problem here with list box in a modal. I am using Angular 5.2.5, PrimeNG 5.2.0 and Ultima theme.

[bobbydowling]

Same here, @walter-psjr

[cinnest]

Same here. Is there any news about this issue?

[markovicboban]

This is caused by #4686. If the first element in dialog is focusable you will get this error. As I wrote there, this feature should be optional.

[unaor]

same here

[polakv93]

This is probably angular issue angular/angular#6005 (comment)
I had similar problem and after enableProdMode( ) system doesn't throw an error.

[brian428]

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).

[smurugavel]

I agree. This is not an angular issue. I also use onPush changeDetectionStrategy and yet I see the error,

[cagataycivici]

So this happens when there is a dialog around? This famous error is too common in dev mode and caused when something changes after angular runs change detection.

[brian428]

Thanks @cagataycivici I'll give this a try when the next version drops!

[Da13Harris]

I'm still seeing this issue (with just a button) after the fix. I think the issue is caused by the focus() method getting called from the ngAfterViewChecked life cycle hook. If I (temporarily) change my local PrimeNG dialog.js file from ngAfterViewChecked to ngAfterContentChecked, the issue is resolved. I think this is because content projection hasn't completed yet during the ngAfterViewChecked hook.

[cagataycivici]

Anyone else still having this after 5.2.3?

[palamethos]

Not anymore for my use case 👍 Thank you

[bobbydowling]

5.2.3 good here. Thanks.

[cinnest]

It works for me as well. Thanks

[kadosh1000]

@cagataycivici I still get this error with 5.2.3 using p-autocomplete and [disabled]:
#5348
http://plnkr.co/edit/RLKpyS4Be3IA9Ytc49SY?p=preview

[Mr-Sloth]

I can verify with 5.2.3 I don't have the problem anymore.

[szechyjs]

@cagataycivici I still get the error with 5.2.3 with a p-dropdown on the page (not in the dialog) and a single input in the dialog.

edit: If I tab the focus away from the p-dropdown prior to opening the dialog I don't get the error. However, focus is still not changed to first dialog input.

[rajkeshwar]

I am facing the same issue in my code while changing p-dropdown and opening a modal. But when I created plunkr to show the issue. It actually works in plunkr. Here is the link if it helps anyone.

primeng version
package.json in my code : "primeng": "^5.2.3",
In plunkr : 'npm:primeng@5.2.0-rc.2'

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

[ARandomDude]

I still get this error when using the onChange of a p-checkbox to show a confirm dialog.
132e195 does not solve the problem.
See: http://plnkr.co/edit/bDUXw6Cs7X24CmWkirtQ (PrimeNG 5.2.3)

[nikolaiwu]

As my very smart colleague do to fix this, just put a input type hidden on top of the form in the dialog.

[ARandomDude]

For everyone having the problem with a ConfirmDialog, I've got a workaround/fix for 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 monkey-patching code into one of your TS files.

[beatjost]

This workaround works for me - but then the dialog is not centered anymore...

[szechyjs]

This still exists in 5.2.4

[graphicsxp]

And also in 5.2.5...

[danailvidev]

And also in PrimeNG 6.0.0-beta.1

Found the issue for me . It was connected with [visible]="some_method()" (visibleChange)="visibleDialog = null" . some_method was returning first null and after first check non boolean value

[AlejandroFlorin]

I get this error (using 5.2.6) if I try to display a dialog when the value of a p-dropdown changes. It works fine if using a button to flip the display flag.

Note that I don't get the error if I break into and step through the onChange function.

<p-dialog [(visible)]="display">
		...
</p-dialog>

<p-dropdown (onChange)="onChange($event.value)" ...>
</p-dropdown>

onChange(value: string) {
	this.display = true;
}

[maksir]

I am facing the same issue in my code when try set [activeIndex]="0"
5.2.4

` <p-accordion [activeIndex]="0">
<p-accordionTab *ngFor="let panel of panels" [header]="panel.header">
{{panel.content}}
<//p-accordionTab>
<//p-accordion>

`

[HenChS96]

thanks @Pikadili83 , that resolve my problem, I had a multiselect of primeng first, then I changed it to be the 2 element in my pdialog and it works, this resolves my problem

[cuneytcalishkan]

It exists for dropdown components even with version 6.1.4 when opening a modal dialog upon dropdown option selection
"ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ui-inputwrapper-focus: true'. Current value: 'ui-inputwrapper-focus: false'."

[jsn0ob]

got a slight workaround

template:

<p-dropdown *ngIf="showDropdown" (onChange)="updateValue($event.value)"></p-dropdown>

controller (wherever the code errors. in my case, whenever i open a confirm dialog):

updateValue(value: string) {
  this.showDropdown = false;
  setTimeout(() => (this.showDropdown = true));
  // stuff that causes the ExpressionChangedAfterItHasBeenCheckedError error...
}

[rohkoli94]

By default focusOnShow is TRUE. i.e first button receives focus on show.
set [focusOnShow]="false".
Cheers!