Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why does resizing textareas in angular material, require anything other than `cdkTextareaAutosize` directive? #15813

Open
learnwell opened this Issue Apr 13, 2019 · 2 comments

Comments

Projects
None yet
2 participants
@learnwell
Copy link

learnwell commented Apr 13, 2019

What is the expected behavior?

The docs for Automatically resizing a <textarea> and the stackblitz example 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 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 👍

@crisbeto

This comment has been minimized.

Copy link
Member

crisbeto commented Apr 14, 2019

The extra logic is there to make sure that the textarea resizes when the font size is changed through the mat-select. If you just want a textarea that resizes to fit the content, you only need the cdkTextareaAutosize.

@learnwell

This comment has been minimized.

Copy link
Author

learnwell commented Apr 14, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.