angular / angular/components

Add minimal example for cdkTextareaAutosize

Open
#15,813 6 comments 7 reactions 0 assignees View on GitHub
area: material/input docs feature help wanted P5
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### What is the expected behavior?
The [docs](https://material.angular.io/cdk/text-field/overview) for `Automatically resizing a ` and the [stackblitz example](https://stackblitz.com/angular/aqdvjmmqomd) should only mention what's actually needed to make it work.

#### What is the current behavior?
They mention a whole lot of stuff, **_removing which_** still lets things function! So its not clear why its been put there and its misleading without an explanation.

Extra stuff in the HTML template:
```
#autosize="cdkTextareaAutosize"
```

Extra stuff in the component:
```
import {CdkTextareaAutosize} from '@angular/cdk/text-field';
import {..., NgZone, ViewChild} from '@angular/core';
import {take} from 'rxjs/operators';
...
constructor(private ngZone: NgZone) {}
@ViewChild('autosize') autosize: CdkTextareaAutosize;
triggerResize() {
// Wait for changes to be applied, then trigger textarea resize.
this.ngZone.onStable.pipe(take(1))
.subscribe(() => this.autosize.resizeToFitContent(true));
}
}
```
That's 4 extra imports, a `viewchild` binding and when I put a `console.log` statement inside either `triggerResize` or the subscribed function ... nothing happens ... meaning the code never runs! So what is the point of all that extra stuff? Maybe its actually useful for something else that the docs failed to mention?

#### What are the steps to reproduce?
This [stackblitz](https://stackblitz.com/edit/mat-list-height?embed=1&file=src/app/app.component.html) shows that nothing other than `cdkTextareaAutosize cdkAutosizeMinRows cdkAutosizeMaxRows` is needed to `Automatically resizing a <textarea>`

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular v7, Material v7 are the versions I used.

#### Is there anything else we should know?
Keep up the good work 👍

Contributor guide

Open the contributing guide

Research direction

Start with the linked Angular Material text-field documentation and its StackBlitz example, then compare them with the minimal reproduction linked in the issue. Verify which directives and setup are required for automatic resizing; done means the documentation and example show only the necessary code and explain any optional behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.