How to force Textarea to increase height when a user puts in a line break?

Question

Here is the Stackblitz of the problem.

Taking help from this post. I have made it to adjust height; when more than 107 characters are entered it expands from 3 rows to 5 rows. and after that it adds a scrollbar and user can scroll rest of the content.

My requirement is that it should also behave the same way when a user puts a line breaks. If a user puts in 1 then presses enter key then 2 then enter 3 and enter again on the next enter it should resize and increase height for the 4th row. How can I do this ?

import {Component, ElementRef, ViewChild} from '@angular/core';

/**
 * @title Basic Inputs
 */
@Component({
  selector: 'input-overview-example',
  styles: `
::ng-deep .commentText {
  width: 100% !important;
  min-height: 59px;
  max-height: 100px;
  border-radius: 4px !important;
  border: solid 1px #bab8b8 !important;
  font-size: 13px;
  color: #000000;
  padding: 6px;
  resize: none;
}
`,
  template: '
<div style="width: 250px">

    <textarea class="commentText"
                      #commentTextArea
                      [style.height]="textAreaHeight"
                      (input)="textAreaResize()"
                      [maxLength]="300"
                      [(ngModel)]="commentTextValue"
                      placeholder="Type your Comment">
  </textarea>

</div>

',
})
export class InputOverviewExample {
  @ViewChild('commentTextArea', {static: false}) commentTextArea: ElementRef;
  textAreaHeight: any;
  commentTextValue: string;


  textAreaResize() {
    // this.changeDetectorRef.detectChanges();


    const textArea: HTMLTextAreaElement = this.commentTextArea.nativeElement;
    if (this.commentTextValue || this.commentTextValue === '') {
      if (this.commentTextValue.length < 107) {
        this.textAreaHeight = '59px';
      } else {
        const height = Math.max(57, Math.min(textArea.scrollHeight, 98));
        textArea.style.overflow = (textArea.scrollHeight > height ? 'auto' : 'hidden');
        this.textAreaHeight = height + 'px';
      }
    }
  }

}


/**  Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

score 1 · Accepted Answer · answered Oct 21 '19 at 17:00

Use cdkTextareaAutosize decorator on the textarea to increase height with entering or line break.

<textarea class="commentText"
     #commentTextArea
     cdkTextareaAutosize
     [style.height]="textAreaHeight"
     (input)="textAreaResize()"
     [maxLength]="300"
     [(ngModel)]="commentTextValue"
     placeholder="Type your Comment">
</textarea>

How to force Textarea to increase height when a user puts in a line break?

1 Answers1