Semantic-ui-react: Textarea does not auto height

Created on 3 Dec 2016 · 11Comments · Source: Semantic-Org/Semantic-UI-React

The content of textarea may be very long. The height of textare should flow the content. Please update. This libray made my day. Thank you. Awesome!!!!

enhancement good first issue help wanted

Source

huuson235

👍3

All 11 comments

This sounds like a great feature. I think we should put this behind a prop though, perhaps default it to true but allow users to still disabled it should they wish.

Here some ideas, feedback?

<TextArea autoHeight />
<TextArea autoExpand />
<TextArea autoSize />
<TextArea autoRows />

levithomason on 4 Dec 2016

Here's a CSS based implementation, and a JS solution as well. I'm sure there are 1,000 ways to do this.

levithomason on 4 Dec 2016

Woops, fat fingers. Sorry!

davezuko on 6 Dec 2016

There really are lots of solutions. I'm currently using this one: https://www.npmjs.com/package/react-textarea-autosize which is working flawlessly. Would be awesome to get this functionality with just a prop.

wursttheke on 7 Dec 2016

👍1

Indeed, although, I hope we're able to implement something much simpler if possible. Seems like a lot of code and logic to resize a textarea. :/

levithomason on 7 Dec 2016

yes. I agree that making textarea auto resize is not difficult. I think this library will be more perfect if it has it. When waiting for this feature I will use "traditional way". Thanks all ^^

huuson235 on 7 Dec 2016

Would love a PR for this one if anyone is up for it. I've labeled this issue accordingly.

levithomason on 8 Dec 2016

👍1

react-textarea-autosize it's package from andreypopp. I used it in many of my projects. It's tiny and very tested for all major browsers. Why not use it?

kulakowka on 13 Dec 2016

Per https://github.com/Semantic-Org/Semantic-UI-React/issues/982#issuecomment-265497112 I think it is overloaded for what it needs to do. It is 2 modules and 367 physical LOC. We don't need props such as useCacheForDOMMeasurements nor onHeightChange and I think the use of animation frames is a bit much.

I would encourage users to use that module if it suits their needs. SUI requires no special classNames nor markup to style the textarea when used in a Form, so it will work OOTB.

When we add auto height I think it should be a single prop autoSize and use a more minimal implementation. I could be wrong here, of course, this is just my initial impression on solving this problem.

levithomason on 14 Dec 2016

👍1

I'll try to solve it