md-textarea

[Aleš]

I would like to add md-textarea. From what I've tried(c&p md-input code, changing selector and template), it should be pretty straightforward, as it just worked without any changes to style or the component itself.

The differences between input and textarea are

• textarea doesn't have type, step, list attributes
• textarea might have auto expand/size(probably not needed in the first iteration)

Since 90% of the component is made of annotations, and those cannot be inherited, the way to go(I think) might be either to extend selector

selector: 'md-input,md-textarea',

and use ElementRef to check which selector matched(unless there's a better way I don't know of) and *ngIfthe template to either <input> or <textarea>.

or keep only one selector(that is md-input), and add md-textarea as attribute, and *ngIf the template depending on that.

In both cases I'd be needed add check that type was not added along <md-textarea> or md-textarea, because of _convertValueForInputType, there won't be no need to do anything with step or list, since those simply won't be on the *ngIf'd template.

Thoughts?

---

as for autosize, there's this tiny thing https://github.com/stevepapa/angular2-autosize

import { ElementRef, HostListener, Directive} from 'angular2/core';

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

export class Autosize {
 @HostListener('input',['$event.target'])
  onInput(textArea) {
    this.adjust();
  }
  constructor(public element: ElementRef){
  }
  ngOnInit(){
    this.adjust();
  }
  adjust(){
    this.element.nativeElement.style.overflow = 'hidden';
    this.element.nativeElement.style.height = 'auto';
    this.element.nativeElement.style.height = this.element.nativeElement.scrollHeight + "px";
  }
}

which utilizes scrollHeight, which is apparently supported by most browsers https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

[Jeremy Elbourn]

@hansl did you have any existing plans WRT textarea implementation details?

I'm thinking it might be good to have a MdTextField base class that both MdInput and MdTextArea extend, mainly so they can set up different bindings. We could possibly also introduce an internal directive like MdTextFieldWrapper that has all the wrapper elements and styles simply content-projects either the input element or textarea element.

The autosize would be a good follow-up. It would be good to see a simple proof-of-concept on the scrollHeight technique, which would be pretty neat.

[Aleš]

You can see it here https://stevepapa.com/angular2-autosize/

[Naveed Ahmed]

@jelbourn can this be added to Alpha.6 milestone?

[Aleš]

Any updates? Do those plans exist? cc @jelbourn @hansl

[Sendil Kumar N]

@fxck for undo and redo can we have something like this

[Aleš]

not sure I follow, you want to use React to do undo redo? why would a textarea even need an undo redo, you can do cmd + z, cmd + shift + z?

[Sendil Kumar N]

Textarea in general, when you continuously type-in, and then do a undo remove all text at once.
if you take the example undo will remove character by character.

[Aleš]

That doesn't really have to do anything with either native textareas or material spec though. Maybe some md-wysiwyg editor, that will be built on top of md-textarea much later on.

[Naveed Ahmed]

Aleš I was also wondering what Sendil actually mean by having undo/redo for textarea, but after his recent comment, I revisited the textarea example on react site, and I think could be a really useful feature especially in cases where we have to type in long text. The Github textarea where we type in the comments also have similar functionality, although its a richtext area.

[Jeremy Elbourn]

@fxck Feel free to send a PR; we don't have the work scheduled for alpha.6 or 7 right now

[Aleš]

@jelbourn should I go with that MdTextField base class, or with my original plan though?

[Jeremy Elbourn]

@fxck I would lean towards taking the base class approach; I'm thinking that will end up being cleaner / easier to split up.

[cesco]

We would love that!

[Henry Tafolla]

@jelbourn @kara any plans to include this in alpah.8 or 9?

[Alvaro Cruz]

@jelbourn @kara, when do you guys think text area will make it to material components?

[Zhu Liang]

@jelbourn hi, which stage is this feature in? I see PRs and the issue is closed but on the homepage it is Not started.

[Aleš]

It's in master, but not released on npm.

[szykov]

I see it's on npm but how to auto-size md-textarea ? Adding attribute md-autosize isn't working for me...
Is there out of the box solution?

[binarious]

@szykov have you tried mdTextareaAutosize? It's in the demo app.

[szykov]

@binarious thanks, but I already solved this issue and with the help of this demo app. Wrapping in md-input-container and etc fixed it.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}