Skip to content

md-textarea #546

@fxck

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureThis issue represents a new feature or feature request rather than a bug or bug fix

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions