Introduce react-textarea-autosize instead of using style.height side effects (#3334)

app/javascript/mastodon/components/autosuggest_textarea.js

@@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { isRtl } from '../rtl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import Textarea from 'react-textarea-autosize';
 
 const textAtCursorMatchesToken = (str, caretPosition) => {
   let word;
@@ -69,10 +70,6 @@ class AutosuggestTextarea extends ImmutablePureComponent {
       this.props.onSuggestionsClearRequested();
     }
 
-    // auto-resize textarea
-    e.target.style.height = 'auto';
-    e.target.style.height = `${e.target.scrollHeight}px`;
-
     this.props.onChange(e);
   }
 
@@ -160,10 +157,6 @@ class AutosuggestTextarea extends ImmutablePureComponent {
     }
   }
 
-  reset () {
-    this.textarea.style.height = 'auto';
-  }
-
   render () {
     const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props;
     const { suggestionsHidden, selectedSuggestion } = this.state;
@@ -175,8 +168,8 @@ class AutosuggestTextarea extends ImmutablePureComponent {
 
     return (
       <div className='autosuggest-textarea'>
-        <textarea
+        <Textarea
-          ref={this.setTextarea}
+          inputRef={this.setTextarea}
           className='autosuggest-textarea__textarea'
           disabled={disabled}
           placeholder={placeholder}

app/javascript/mastodon/features/compose/components/compose_form.js

@@ -67,7 +67,6 @@ class ComposeForm extends ImmutablePureComponent {
   }
 
   handleSubmit = () => {
-    this.autosuggestTextarea.reset();
     this.props.onSubmit();
   }
 

package.json

@@ -90,6 +90,7 @@
     "react-router": "^2.8.0",
     "react-router-scroll": "^0.3.2",
     "react-simple-dropdown": "^1.1.4",
+    "react-textarea-autosize": "^5.0.6",
     "react-toggle": "^2.1.1",
     "redis": "^2.6.5",
     "redux": "^3.6.0",

yarn.lock

@@ -5590,6 +5590,12 @@ react-test-renderer@^15.5.4:
     fbjs "^0.8.9"
     object-assign "^4.1.0"
 
+react-textarea-autosize@^5.0.6:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-5.0.6.tgz#a3742e0a319484021b4dbfa1519df287768f2133"
+  dependencies:
+    prop-types "^15.5.8"
+
 react-toggle@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-2.1.1.tgz#80600a64417a1acc8aaa4c1477f7fbdb88b988fb"