breaking(TextArea): remove autoHeight prop

[layershifter]

Fixes #3418.

BREAKING CHANGES

This PR removes the autoHeight prop from the TextArea component.

Motivation

We had numerous issues with TextArea component and autoHeight prop:

• TextArea with autoHeight doesn't shrink when lines deleted #3418
• fix(Textarea): fix broken ctrl-z on firefox #3343
• TextArea's autoHeight sometimes makes it taller than an actual text #2173
• IE: TextArea: wrong autoHeight counting #1925
• TextArea: wrong autoHeight counting #1843
• TextArea autoHeight initialState with SSR #1478
• TextArea incorrect height with autoHeight prop when element is not visible #1405
• Textarea does not auto height #982 (comment)

I had a conversation with team from Ukraine that continuously uses SUIR and they said that autoHeight is buggy and they are using react-textarea-autosize, too 😼

So, as @levithomason originally proposed I will suggest to use react-textarea-autosize:

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.

Before

import { Form, TextArea } from 'semantic-ui-react'

//

<Form.TextArea autoHeight />
<TextArea autoHeight />

After

import { Form, TextArea } from 'semantic-ui-react'
import TextareaAutosize from 'react-textarea-autosize'

//

<Form.TextArea control={TextareaAutosize} />
<TextareaAutosize  />

I also created a Codesandbox example with how-tos, https://codesandbox.io/s/1v67906ll4. It will be available on the Prototypes page after the next release, but you can start to migrate right now.

[codecov-io]

Codecov Report

Merging #3465 into master will decrease coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #3465      +/-   ##
==========================================
- Coverage   99.89%   99.89%   -0.01%     
==========================================
  Files         172      172              
  Lines        2814     2796      -18     
==========================================
- Hits         2811     2793      -18     
  Misses          3        3

Impacted Files	Coverage Δ
src/addons/TextArea/TextArea.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0ecbe28...1fc5e46. Read the comment docs.

[codecov-io]

Codecov Report

Merging #3465 into master will decrease coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #3465      +/-   ##
==========================================
- Coverage   99.89%   99.89%   -0.01%     
==========================================
  Files         172      172              
  Lines        2814     2796      -18     
==========================================
- Hits         2811     2793      -18     
  Misses          3        3

Impacted Files	Coverage Δ
src/addons/TextArea/TextArea.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0ecbe28...1fc5e46. Read the comment docs.

[levithomason]

Released in [email protected].

[TristanPouliquen]

@layershifter Hi, I'm trying to migrate to your new implementation with TextAreaAutosize to work with forms in a Semantic Accordion.

However, I can't seem to get the textarea value in the onChange function. I looked at your Sandbox and I also get undefined when I log data.valuein your example (how the value is kept in memory I do not know as you also do value={this.state.value} and the value is also undefined in the state I get from my console.log.

Do you have any idea as to why ? Thanks in advance !

[layershifter]

However, I can't seem to get the textarea value in the onChange function.

You should use:

onChange={e => this.setState({ value: e.target.value })}

I've update CodeSandbox to reflect this 👍

[TristanPouliquen]

Thanks for your swift answer ! It works as a charm 👍