Repository navigation
md-textarea #546
Description
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,listattributes - 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
Activity
jelbourn commentedon May 27, 2016
@hansl did you have any existing plans WRT
textareaimplementation details?I'm thinking it might be good to have a
MdTextFieldbase class that bothMdInputandMdTextAreaextend, mainly so they can set up different bindings. We could possibly also introduce an internal directive likeMdTextFieldWrapperthat 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
scrollHeighttechnique, which would be pretty neat.fxck commentedon May 27, 2016
You can see it here https://stevepapa.com/angular2-autosize/
naveedahmed1 commentedon May 29, 2016
@jelbourn can this be added to Alpha.6 milestone?
fxck commentedon Jun 1, 2016
Any updates? Do those plans exist? cc @jelbourn @hansl
sendilkumarn commentedon Jun 1, 2016
@fxck for
undoandredocan we have something like thisfxck commentedon Jun 2, 2016
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 commentedon Jun 2, 2016
Textarea in general, when you continuously type-in, and then do a
undoremove all text at once.if you take the example
undowillremove character by character.fxck commentedon Jun 2, 2016
That doesn't really have to do anything with either native textareas or material spec though. Maybe some
md-wysiwygeditor, that will be built on top of md-textarea much later on.naveedahmed1 commentedon Jun 2, 2016
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 commentedon Jun 2, 2016
@fxck Feel free to send a PR; we don't have the work scheduled for alpha.6 or 7 right now
fxck commentedon Jun 3, 2016
@jelbourn should I go with that
MdTextFieldbase class, or with my original plan though?jelbourn commentedon Jun 3, 2016
@fxck I would lean towards taking the base class approach; I'm thinking that will end up being cleaner / easier to split up.
cescoferraro commentedon Jun 17, 2016
We would love that!
htafolla commentedon Aug 16, 2016
@jelbourn @kara any plans to include this in alpah.8 or 9?
alvaro450 commentedon Aug 16, 2016
@jelbourn @kara, when do you guys think text area will make it to material components?
paradite commentedon Oct 27, 2016
@jelbourn hi, which stage is this feature in? I see PRs and the issue is closed but on the homepage it is
Not started.fxck commentedon Oct 27, 2016
It's in master, but not released on npm.
szykov commentedon Jan 26, 2017
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 commentedon Feb 8, 2017
@szykov have you tried
mdTextareaAutosize? It's in the demo app.szykov commentedon Feb 8, 2017
@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 commentedon Sep 5, 2019
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.