Material-ui: [TextArea] New component

[cherniavskii]

TextField component has a multiline property, which is basically a text area. But except multi-line text field, there is also a text area text field in Material Design.
What do you think about adding this component? It can compose TextField, so implementation should be trivial.

[cherniavskii]

Anybody working on this? I can give it a try

[sakulstra]

@cherniavskii i think not yet, but how should this component look like? The current multiline TextField pretty much fullfills the spec or? So TextArea could basically be a simple wrapper like:

const TextArea = (props) => <TextField multiline {...props} />

or am i missing sth?

[leMaik]

@sakulstra You're missing the initial suggestion :sweat_smile:

TextField component has a multiline property, which is basically a text area. But except multi-line text field, there is also a text area text field in Material Design.

E.g. this:

Versus this:

Specs: https://material.io/guidelines/components/text-fields.html#text-fields-field-types

[romanzenka]

I do not think the implementation will be trivial! The big deal with text area is that you give it some vertical space and it would not leave this space. But the TextField as it is implemented grows with each new row being entered. I ran into this problem when I realized that on my UI I have an undefined amount of space that I want to fill with one text area (there is a horizontal splitter allowing the user to set how much space they want for the text), and I have no clue a priori how many rows of text that is.

[malcolm-kee]

@sakulstra I think the main difference between <Input multiline /> and TextArea is that TextArea is having a fixed height while <Input multiline />'s height change with the input, as demo in the Material UI Text Field - Field Types section.

[marsonmao]

Also the border of text area might be an issue. The border (actually the underline, since it has only 1 border at the bottom) of the text field is animated, expanding from center to the sides when focused, but I'm not sure what should the border of text area look like when focused. The official material design document does not show an animated version of the text area.

[oliviertassinari]

The text field now supports 3 variants: standard, outlined, filled. We can close the issue :).

[WebDeg-Brian]

@cherniavskii Isn't that what rowsMax does? Mui docs