Components: mat-select seems to have serious performance issue

[naveedahmed1]

Bug, feature request, or proposal:

With latest release, mat-form-field support was added for mat-select. But it introduced performance issues when we have multiple select lists (5-8).

When we use mat-form-field with input or text area it doesn't seem to cause any performance issue but it seem that its implementation for mat-select needs a review. On lengthy forms we are seeing a delay of up to 3 seconds, which are instant without mat-form-field on mat-select.

What is the expected behavior?

It should smooth and fast.

What is the current behavior?

Its very slow.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.4
Material 2.0.0-beta.12
Chrome

[crisbeto]

It’s not really doing a lot differently from the previous approach. Can you post an example of a form that you consider slow?

[naveedahmed1]

Have you noticed performance issues when using mat-form-field with mat-select?

[crisbeto]

I haven't when trying against our various test apps, but your use case might be different.

[naveedahmed1]

In my case I have dynamic forms, but till last beta the form in my app were very smooth, but after this update forms with select list are loading slow. Can you please try it with some form and around 5-6 select list?. For clear idea add a button to toggle visibility of form.

[crisbeto]

Can you post an example of a slow form? You can use one of these as a base: https://goo.gl/DlHd6U or https://goo.gl/wwnhMV.

[naveedahmed1]

Can you please take a look at https://stackblitz.com/edit/angular-material2-issue-kdt9y4?file=app%2Fapp.component.ts

[crisbeto]

I see. The reason is because all of those 5x100 options are rendered on init, even though they're not displayed, however this is how the select has always worked and definitely hasn't changed since the last beta. We're currently discussing better ways to handle larger lists of options at https://github.com/angular/material2/issues/5113.

[naveedahmed1]

If I remove <mat-form-field>, its very smooth, so I think the problem is with <mat-form-field>.

[crisbeto]

I'm not sure I see a difference, but maybe we're talking about different things. I was referring to the delay after toggling the form.

[naveedahmed1]

I am also referring to the rendering of form after we click toggle button i.e. delay between the button click and the moment when everything is rendered on screen. And what I am saying is delay is noticeable when we surround mat-select with mat-form-field. I have also gone through https://github.com/angular/material2/issues/5113 may be its due to this issue but in my case its noticeable after this change .

[naveedahmed1]

One more thing, if you open few select lists from form, then toggle form to hide it and then open again, it will load even slower.

[jagomf]

Also, conditionally hiding options throws an error.

Consider this case:

<mat-form-field>
  <mat-select placeholder="Country" [(ngModel)]="value" (blur)="onBlur()" class="select-country-main">
    <ng-template ngFor let-country [ngForOf]="countries" [ngForTrackBy]="trackByCountryId">
      <mat-option *ngIf="!isExcluded(country)" [value]="country">
        <country-flag [country]="country"></country-flag>
      </mat-option>
    </ng-template>
  </mat-select>
</mat-form-field>

You get an error:

Error: mat-form-field must contain a MatFormFieldControl.

Before this would work perfectly.

[mmalerba]

@jagomf Are you sure you're using the latest version of material? Your example seems to work fine: https://stackblitz.com/edit/angular-material2-issue-dtceox?file=app/app.component.ts

Also please file a separate issue rather than tacking on to unrelated issues

[jagomf]

You're right @mmalerba, updating everything to 5.0 seems to work fine.
However, this makes for a number of prior versions in which it wouldn't work fine (in my case it was Angular 4.4.6 with material 2.0 beta 11).

[imchaitanya9]

Still facing issues while having multiple mat-select with "multiple" property.

@angular/material: 5.0.2
Angular: 5.1.1
@angular/cdk: 5.0.2

[ronaldo127]

I'm facing a similar issue, but in my case I generate 48 options per mat-select and I generate 7 mat-select.
My code is similar to this

These are my angular dependencies on my package.json
"@angular/animations": "^5.0.0",
"@angular/cdk": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/material": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",

[zachberger]

I was able to resolve this by ensuring my mat-form-field was inside a form. Outside a form performance was abysmal.

[chaimmw]

I was using mat select with @ngrx but my select had only 5 options, and it took about 5 seconds for options to appear.

when I used a <select> there was no problem.

[nexen505]

I'll admit that issue still exists in fresh version of Angular only with 10 mat-selects 4 mat-options each for Chrome 72.0.3626.96. Browser stucked API-requests and never rendered.

Versions:
"@angular/animations": "^7.2.2",
"@angular/cdk": "7.0.1",
"@angular/common": "^7.2.2",
"@angular/compiler": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/material": "7.0.1",
"@angular/material-moment-adapter": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",

[w0wka91]

Is there any progress on this?

[garg10may]

This should be resolved at earliest, select are essential part of form. In my case I have multi select with 1000+ options and is loads absymally slow.

[naveedahmed1]

Has the performance downgraded further? Countries list with ~250 items now takes 2-3 seconds to open, after I tap/click .