javascript/react dynamic height textarea (stop at a max) : <p>What I'm trying to achieve is a textarea that starts out as a single line but will grow up to 4 lines and at that point start to scroll if the user continues to type. I have a partial solution kinda working, it grows and then stops when it hits the max, but if you delete text it doesn't shrink like I want it to.</p>

<p>This is what I have so far.</p>

<pre><code>export class foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      textareaHeight: 38
    };
  }

  handleKeyUp(evt) {
    // Max: 75px Min: 38px
    let newHeight = Math.max(Math.min(evt.target.scrollHeight + 2, 75), 38);
    if (newHeight !== this.state.textareaHeight) {
      this.setState({
        textareaHeight: newHeight
      });
    }
  }

  render() {
    let textareaStyle = { height: this.state.textareaHeight };
    return (
      &lt;div&gt;
        &lt;textarea onKeyUp={this.handleKeyUp.bind(this)} style={textareaStyle}/&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>Obviously the problem is <code>scrollHeight</code> doesn't shrink back down when <code>height</code> is set to something larger. Any suggestion for how I might be able to fix this so it will also shrink back down if text is deleted? </p>
