md-textarea

[fxck]

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

[jelbourn]

@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.

[fxck]

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

[naveedahmed1]

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

[fxck]

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

[sendilkumarn]

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

[fxck]

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?

[sendilkumarn]

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.

[fxck]

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.

[naveedahmed1]

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.

[jelbourn]

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

[fxck]

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

[jelbourn]

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

[cescoferraro]

We would love that!