Textarea component

[JoeyDjr]

🎯 The purpose of this discussion is to have a Textarea component which is a multiline text input area of adjustable size.

💡 To do this, I propose to improve the TextField component by adding a multiline? : boolean property passed to the InputBase component. If multiline is set to true, then the InputBase component will render an HTML5 <textarea> tag instead of the current <input> tag :

{multiline ? <textarea {...props} /> : <input {...props} />}

📝 It is recommended to use <textarea> instead of <input type="textarea">.

🙏 Please do not hesitate to share your ideas @ccamel @fredericvilcot @lolottetheclash @ErikssonJoakim

[fredericvilcot]

@JoeyDjr
Seems good to me
It will be great if we could add some little customization on the resizable icon in the bottom right of the area, like adding with css a nwse-resize cursor with some OKP4 color.

[JoeyDjr]

Sounds good to me.

[ccamel]

The resize capability should be an option (we might want to disable the resizing of the textarea).

Ideally, I would like the ability to resize to be broader and apply to other components, like the canvas for example. In which case, the native approach might not be the best. To be matured.

[fredericvilcot]

@ccamel I see your point but I can't see why resize capability should be an option as it does not interfere with its use?
The user is free to use it or not (this is the case in the vast majority of web / mobile applications offering a Textarea).

On the other hand, I agree on the fact of developing a container component that would be able to be resized and embed any type of component.
Consideration should be given to a future implementation.

However, if this is OK for you, I propose, for the sake of time, to offer this Textarea component with its native resize.

[ccamel]

@fredericvilcot Well I don't know. I think it's more a UX concern. As far as I see, there's a lots of question about how to disable the resize feature of a textarea, so I could presume it could be useful. 😄 But I believe it can be easily addressed by CSS.

[fredericvilcot]

@ccamel
Ok, let's do this 👌

[fredericvilcot]

@JoeyDjr @ccamel

I think we can add these two properties:

• multiline: boolean
• disableAreaResize: boolean

We must provide some style for the native resize icon when multiline is set to true and disableAreaResize to false: add a nwse-resize cursor and some color from the palette.

If it's OK for both of you, I could close this discussion and @JoeyDjr could open the dedicated issue before implementing it.

Let me know 😌

[JoeyDjr]

It is ok for me 👍

[fredericvilcot]

@ccamel do you see any other point?

[ccamel]

Good to me! Thanks @fredericvilcot

[fredericvilcot]

@JoeyDjr You can open an issue and implement it, I lock this discussion

[JoeyDjr]

I wrote the issue and started the implementation.
But I'm facing two points :

• changing the resize icon is very difficult and I think we should not do it. All the research I've done on this subject has led me to the same conclusion: very difficult if not impossible because it's the responsibility of the browser. And even if we manage to implement it, it may not work on some browsers.
• the second point concerns the height of the zone. Do we propose a prop that can handle it, do we set it arbitrarily, or do we use the current size prop? Another solution is to use the rows attribute of the <textarea>

What do you think @fredericvilcot @ccamel ?

[fredericvilcot]

@JoeyDjr
Regarding these two points:

• I agree that native behaviors may lead to inconsistency depending on the browser, so I purpose to only add the cursor on hover and let the main style be applied by the browser. As @ccamel said above, we should implement in a next future a container component that will automatically handle the element resize.
• For the height management, it is generally advisable to use the rows property which makes it possible to control the starting height, and which can then be resized (or not)

👉 If you are both OK with that, we can implement it in this way