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
– Ramesh Rajendran, Commented Nov 7, 2022 at 16:01
@RameshRajendran thats true. to mitigate the issue at some level found a solution below — Snivio
– Snivio, Commented Nov 11, 2022 at 14:43

Snivio · Accepted Answer · 2022-11-07 20:45:20Z

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

Collectives™ on Stack Overflow

AngularJs Material textarea performance issue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related