AngularJs Material textarea performance issue

Question

Im using a form that contains a more than 40-50 textareas, when the md-no-autogrow option is enabled which it is by default,this causes a huge performance issue.

Function responsible https://github.com/angular/material/blob/0b55529940d516a94777ca1d179e65df7835dd2a/src/components/input/input.js#L532

if I disable md-no-autogrow the resize functionalities are lost what could be a better solution?

Answer 1

Possible Solution

  <textarea
    ng-model="$ctrl.model"
    ng-keydown="$ctrl.onKeyDown($event)"
    ng-keyup="$ctrl.onKeyUp($event)"
    md-no-autogrow="true"
  >

 onKeyUp(e) {

    if (e.key === 'Enter') {
      return;
    }

    let element = e.target;

    element.style.height = 'auto';
    if (element.scrollHeight > 54) {
      element.style.height = element.scrollHeight + 'px';
    }
  }

  onKeyDown(e) {
    if (e.key !== 'Enter') {
      return;
    }
    let element = e.target;

    let numberOfLines = element.value.split('\n').length;
    if (numberOfLines >= 2) {
      element.style.height = 'auto';
      element.style.height = (element.scrollHeight + 26) + 'px';
    }
  }