Expression has changed after it was checked.

[0xphilipp]

Bug description:

When using async angular 2 validators in combination with the tab control it throws:
"Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'."
In the plunker I could only reproduce the problem referencing the same formControl. In the real application I don't do this and also have that problem.

Link to minimally-working plunker that reproduces the issue:

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

Version of Angular, ng-bootstrap, and Bootstrap:

See plunker.

[alex321]

I hope that this might be helpful/relevant.
I use to see the same issue here: #970 (at least the error message was the same and I thought that it was the control).

However, on both Chrome (55.0.2883.87) and Edge, I can not reproduce either error.
@Phmager Are you able to reproduce the error in my plunker by any chance?

[pkozlowski-opensource]

@Phmager what shell I do to see the error in your plunker? I can't trigger the mentioned error by typing to the input box, switching tabs etc. Could you please provide exact steps to reproduce?

As @alex321 mentioned it might be linked to a browser version (I'm using Chrome 55.0.2883.95) so if you can still reproduce it please add info about your environment.

[0xphilipp]

Currently at home I cannot reproduce it in the initial plunker (Chrome 55.0.2883.87).

Here is the correct plunker:
http://plnkr.co/edit/QxVMdcmTq6Uj2v7Pc2mj?p=preview

Steps to reproduce:

1. Select the Textbox
2. Switch Tab to "Fancy title"

Same problem in edge:

[pkozlowski-opensource]

@Phmager thnx for getting back with a new plunker / more info. Unfortunately I still can't reproduce the problem on my end with the updated instructions on latest Chrome... Maybe it is one of the extensions that is causing problems? Could you try in the incognito window?

I don't have Edge handy so can't confirm this one one...

[tjaartvanderWalt]

@pkozlowski-opensource I was able to replicate the error message.

[alex321]

@pkozlowski-opensource @Phmager I can reproduce it now.

I really doubt that this has anything to do with ng-bootstrap. In my opinion, this is a problem with angular and it would be good to update the Issue you have raised on their board with the new plunker.

[sirhcybe]

I am seeing the same error with NgbAccordion after I upgraded from alpha-14 to alpha-18. I downgraded one version at a time back to alpha-14 and saw it in each version until I got back to alpha-14. On my page I have a button inside an NgbAccordion. Clicking the button should open an NgbModal but due to the error above, for every version of ng-bootstrap after alpha-14 it breaks. I will try to reproduce in a plunker.

[sirhcybe]

I was having trouble recreating my issue in a plunker so I am trying to debug it in my app. It's going slow but the bug has something to do with the focus not being updated properly on the
NgbPanelContent object. When you open the accordion panel and then immediately click the button the error happens because Angular's detect changes method still thinks the component should be in focus. If you click outside the panel and then click the button, the internal focus has been updated so the error does not occur. I will keep debugging this to see if I can get to the bottom of it next week.

[L1NT]

I debugged a similar issue and traced it to the following:
excerpt
<div [attr.aria-selected]="panel.focused">
<a (focus)="panel.focused = true" (blur)="panel.focused = false">

Within a template[ngbPanelTitle] I have a button which opens an NgbModal. Mousing over the button sets panel.focused to true, clicking the button triggers a change detection cycle and launches the modal which causes panel.focused to change to false, throwing the error: Expression has changed after it was checked. Previous value: \'true\'. Current value: \'false\'.

[shairez]

Getting the same error -

1. Clicking inside an input element (and by that - grabbing the focus)
2. Hitting a keyboard shortcut (like ctrl+k) which runs a modal opening code
3. Trying to open a new modal results in this error

So it's definitely has something to do with the focus.

What have worked for me:

What I did is to invoke blur() on the focused element before opening the modal window, that helped.

Hope it helps in some way

[sirhcybe]

I upgraded to the latest version of ng-bootstrap along with some other package updates and this problem has gone away for me. I am currently on Angular 2.4.0, ng-bootstrap 1.0.0-alpha.21, bootstrap 4.0.0-alpha.6, rxjs 5.1.0, zone.js 0.7.6, @angular/cli 1.0.0-rc.2, and typescript ~2.0.0.

[pkozlowski-opensource]

Hi there! I was just investigating this issue and I must say that I'm utterly confused right now :-) My confusion steams from the following:

• there are many comments with different scenarios and different widgets (sometimes accordion, sometimes tabset);
• there are reports claiming that the issue is fixed.

At this point I don't feel like I've got the exact scenario that causes error(s) (probably there are several issues being discussed here...) with the latest version. Without a small reproduce scenario it is hard to debug and fix things...

@shairez I think I see how your particular scenario could cause problems but having a plunker would help here as I could be sure :-)

[sirhcybe]

@pkozlowski-opensource
I had been getting this error every time I tried to open a modal from the accordion and that went away with the update. However, it popped up again today in my app in a reproducible way. I know that's not that helpful and I'll try to repro it in a plunker when I get a chance. Hopefully, I'll have more success than my first plunker.

[L1NT]

https://plnkr.co/edit/nZxvGbNpRo6wZkoD1Qkd?p=preview

So, when creating the Plunker, I identified a few more nuances to recreate my scenario: it seems to be a combination of NgbAccordion, a <span>, and NgbModal. I don't believe NgbModal is a specific requirement but triggers additional common behavior; you'll notice that if the alert() function is empty (doesn't call NgbModal), the error goes away. Also surprising to me was the different behavior between the <span> element relative to <button> element which I hadn't noticed before.

It should also be noted to anyone else stumbling upon this error, that it is a by-product of Angular's added development mode checking and won't occur when enableProdMode() is called to enable the production mode.

@pkozlowski-opensource Thanks for looking into this one - I hope the plunker helps!

[pkozlowski-opensource]

Thnx for the plunker @L1NT - I understand now what is going on! It basically boils down to having a binding that changes based on element's focus - modal gets focused when opened hence the error.

The good news is that accordion doesn't really need focus-based inputs - we should be able to remove this portion of the code and remove the root cause of the problem.

I know how to fix it and I will do so as soon as the dust settles around Angular 4.0 support. Once again, thnx for the plunker.

[Syntaf]

Is there a workaround at the moment for preventing this error?

[vishalvarshney]

I go this working by having these lines in my code :

// This is used to push change detection for ng2
constructor(private cdRef: ChangeDetectorRef) {}

ngAfterViewChecked() {
//explicit change detection to avoid "expression-has-changed-after-it-was-checked-error"
this.cdRef.detectChanges();
}

[santosh-more]

same like an above-mentioned issue the modal.open(content) method throws an error:

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

But in elements following contents are added :

Modal not appearing on the top layer of the page.

If anyone would not able to understand my question then am sorry for that.

[Enitnelav]

Hi, i have the same issue on my project when i want to open a modal automatically, i have this error.

So i put a timeout but i am not sure it the best solution.

[cvaldiviezo05]

Tuve el mismo problema al ejecutar (keypress)=metodo($event) y se intentaba abrir un modal me salia el error en consola // lo solucione con :
metodo(event) {
event.srcElement.blur ();
event.preventDefault ();
this.modal.open (this.modalOptions);
...
}
asi con blur(), ya se detecta los cambios de los focus