DEV Community

KVS
KVS

Posted on

Performance issue in Angular 15/16 Form Fields

Getting performance issue in Angular 15/16 post mdc migration. It's happening on other browsers as well but is more clear on Chrome(Version 113.0.5672.126 (Official Build) (x86_64)).

I have a page full of form fields (using material inputs, autocomplete, mat select, checkboxes etc).

While scrolling and some times intermittently the form fields repaints. It's only happening with Form Fields. Tried replicating same in stackblitz and it's happening for a simple input field as well, if the number of fields exeeds say 60-70. Same thing was working fine with Angular 13/14 with even 1000 input fields added.
Here is the stackblitz instance for Angular 15:

  1. Code base: https://stackblitz.com/edit/angular-ivy-qayt3s?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fmain.ts,src%2Fapp%2Fapp.component.css
  2. App URL: https://angular-ivy-qayt3s.stackblitz.io

Here is the stackblitz instance for Angular 13:

  1. Code base: https://stackblitz.com/edit/angular-material-13-starter-x1xj4z-yyhktq?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts,src%2Findex.html 2.** App URL**: https://angular-material-13-starter-x1xj4z-yyhktq.stackblitz.io

Let me know incase anyone else facing this and has a resolution.

Top comments (0)