ionic 3 textarea autosize (not ion-textarea)

Question

I need autosize (elastic) for <textarea>. I need to use <textarea>, cannot use <ion-textarea> for other issues.

I was following: How to autoresize the ion-input field vertically while i am typing & https://stackblitz.com/edit/expandable-input

<ion-textarea> is working:

@Directive({ selector: 'ion-textarea[autosize]' })

But, Not for <textarea>

@Directive({ selector: 'textarea[autosize]' })

Here is My Stackblitz (autosize not working): https://stackblitz.com/edit/expandable-input-htjncw

Console error: "ERROR TypeError: Cannot read property 'style' of undefined ..."

Code:

adjust():void {
    const textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.style.height = textArea.scrollHeight + 'px';
  }

Please see the last URL: https://stackblitz.com/edit/expandable-input-htjncw — Amin9, Feb 04 '19 at 09:47
you will get textarea from `this.element.nativeElement` since you are not using ionic component. — Suraj Rao, Feb 04 '19 at 13:13

score 0 · Accepted Answer · answered Feb 04 '19 at 13:22

If you are adding the directive to textarea instead of ion-textarea, you can get access to the html element directly from nativeElement. You wont be accessing through getElementsByTagName

adjust():void {
    const textArea = this.element.nativeElement;
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.style.height = textArea.scrollHeight + 'px';
}

ionic 3 textarea autosize (not ion-textarea)

1 Answers1