Is there support for textarea that expands as you input more lines, and scales down as you erase lines? I found TextInput, which oddly results in page reload on pressing enter (oh how many times pressing enter has resulted in accidental submission and page reload... I hope you guys fix this), and also tried adding ordinary inside FormField, resulting in weird padding and ugly scrollbar (who on earth scrolls through textareas?).
Any ideas how to get decent textarea?
Kitanotori
All 4 comments
Hi,
I found that using the following structure works great:
<FormFields>
<fieldset>
<FormField label='Category description' htmlFor='description' error={errors.description}>
<textarea rows="5" type='text' id='description' name='description' onChange={(e) => {
this._change(e);
}} />
</FormField>
</fieldset>
</FormFields>
By using this, I don't have weird padding. However, I get scrollbars after the 4 rows are full, but then you can drag and (vertically) expand the textarea.
Bensji
on 30 May 2017
Yes, using is the recommended approach. Closing the ticket.
dgennetten
on 1 Jun 2017
It's not a big deal to use <textarea /> but I'd like to better understand the reasoning behind this. Wouldn't this be a perfectly logical component to have? It was the first thing I was missing and looking when I started using Grommet for the first time. It confused me and still is... I'd be happy to provide a simple wrapper in a PR if that would help, but I fail to see why some elements such as \
Most helpful comment
Thanks for the feedback @arabold. The reason we have a component for Paragraph today is to control things like alignment and size.
TextInput is an example of a simple wrapper around the TextInput, but it provides the ability to use suggestions with Search.
Textarea is a component that does not have the need for any special attribute, not that I can think of. So that's why we decided not to implement a Grommet component for that.
We do have some global css that modifies the style for all textareas inside a Grommet application and as we move to a more self-contained strategy, we will avoid those global css modifiers. That said, I'm pretty confident to say that for Grommet 2.0 we will have a TextArea component 馃憤
Hopefully it clarifies the confusion here.