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?

Why you have more than 40 text area's in a single page? even if you are using normal textbox itself going to make a performance issue. move it accordingly to the different pages or tabs to resolve that. I think it's a functional issue not a technical one! — Ramesh Rajendran, Nov 07 '22 at 16:01
@RameshRajendran thats true. to mitigate the issue at some level found a solution below — Snivio, Nov 11 '22 at 14:43

score 2 · Answer 1 · answered Nov 07 '22 at 20:45

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';
    }
  }

AngularJs Material textarea performance issue

1 Answers1