Components: Textarea in MatForMield can cause ExpressionChangedAfterItHasBeenCheckedError

[Antoniossss]

Bug, feature request, or proposal:

BUG
"@angular/material": "5.2.5",

What is the expected behavior?

No exception

What is the current behavior?

Exception

This is the first time I have notice that and I cannot reproduce this on plain project. I don't know what causes it and how to reproduce for unit testing.

Having following markup:

    <mat-form-field class="summary no-ink-bar">
      <textarea matInput placeholder="Summary:" readonly>{{request.summary}}</textarea>
    </mat-form-field>

Causes following error
Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.js:3688 ERROR Error: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-form-field-should-float: false'. Current value: 'mat-form-field-should-float: true'." node_modulesangular/core/esm5/core.js:10033:32node_modulesangular/core/esm5/core.js:10011:12node_modulesangular/core/esm5/core.js:10178:15node_modulesangular/core/esm5/core.js:14254:9node_modulesangular/core/esm5/core.js:14203:9node_modulesangular/core/esm5

I am fixing this by setting floatLabel="always" so
<mat-form-field class="summary no-ink-bar" floatLabel="always"> <textarea matInput placeholder="Summary:" readonly>{{request.summary}}</textarea> </mat-form-field>

removes that exception.

Maybe someone will have similar issue and will know how to reproduce

[eTallang]

You can probably try to upgrade to latest version and see if that fixes the issue.

[josephperrott]

Can you provide a reproduction in StackBlitz. This will help us to investigate the issue you are seeing.

[EugeneGoroschenya]

Editor URL: https://stackblitz.com/edit/angular-material2-issue-ys19gm?file=app%2Fapp.component.html
App URL: https://angular-material2-issue-ys19gm.stackblitz.io/

[tinyweasel]

I'm getting the same error but only in unit tests.

[gombosg]

Getting the same error here, too.

[mmalerba]

Here's a workaround until I can investigate, just use value="" instead of putting the text as content: https://stackblitz.com/edit/angular-material2-issue-y2tqhg?file=app/app.component.html

[mik01aj]

I had a similar issue and in my understanding the issue is that:

1. mat-form-field creates a form field with an empty value - the mat-label is displayed inside (thus mat-form-field-should-float: false)
2. Interpolation creates the value that should be placed as the textarea value.
3. The mat-form-field receives the new value and decides that now the label should float (mat-form-field-should-float: true)

In case with value="...", (2) happens before (1), so there's no problem. That's also why it happens with textarea, but not with input.

(For the record: I came here debugging a similar error in test - in my case the textarea received the value from ngModel. I ended up working around it by adding floatLabel="always" on the mat-form-field.)

P.S. I had one more similar problem - this time it was: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-focused: false'. Current value: 'mat-focused: true'.. This was because I focused the field in ngAfterViewInit. When I moved the focusing to ngAfterContentInit, this problem was also gone.

[sea-erkin]

<textarea matInput readonly>{{selectedList.summary}}</textarea>
error
<textarea matInput readonly [(ngModel)]="selectedList.summary"></textarea>
works fine

[Zefling]

But it's not possible with this case:
<textarea matInput readonly>{{ctrlForm.value | json}}</textarea>

[George35mk]

Try this

<mat-form-field floatLabel="never"> <input placeholder="My Placeholder" matInput> </mat-form-field>

[viethien]

I got same error, and i set as @Antoniossss it's ok now. Thanks

[adrianbenjuya]

Hi, I've got both errors mat-form-field-should-float and mat-focused for ExpressionChangedAfterItHasBeenCheckedError when using <input autofocus> inside a mat-form-field
with Angular Material v6.

I can bypass the errors by using floatLabel=never and focusing the input in ngAfterContentInit() but it would be awesome to avoid using these approaches.

[simeyla]

These things are never so simple! To add yet another scenario - and some findings of my detective work, here's my situation:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-focused: true'. Current value: 'mat-focused: false'

So this is the same as others have seen - but backwards (focused -> non focused). This is occurring for me on a simple login form - I have two <input> fields that get hidden after a successful (and obviously asynchronous) login. eg. *ngIf="notLoggedIn$ | async" ...

Not surprisingly if I submit the form by clicking my 'Login' button then it works - because focus is instantly lost during that event cycle. It is when I hit 'Enter' to submit the form that the problem arises because focus it taken away from the input control asynchronously.

Now you may be thinking - well that doesn't make sense - the control is already destroyed - and you'd be right. The way I described above seems to work fine - however I'm using CdkPortal and hiding something that is within a portal. That seems to be triggering this at least for me.

So I think I need to discontinue my clever portal stuff at least right now to get this to work - however if you're seeing similar symptoms and using mat-tab then it could be the same cause because my code is very heavily influenced by the way mat-tab works.

[waqas2023]

floatLabel="never"

thanks issue solved.

[fxck]

@simeyla have you ever found a solution? having the exact same problem

[simeyla]

@fxck I’ve concluded that sometimes you just have to add delay(0) to the observable pipe to get it to update later than it wants to.

I’ve gone round and round in circles at various times on this - reread articles and SO posts but sometimes it just seems necessary.

I did create a pipeable operator that adds delay(0) so then I can put isLoggedIn$ | delay | async

I don’t have it to hand now but it’s trivial to write a pipeable operator as long as you remember to export and provide it properly.