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

1 files changed, 3 insertions, 10 deletions

diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js
index 9372e6146..10efd17fb 100644
--- a/app/javascript/mastodon/components/autosuggest_textarea.js
+++ b/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
-          ref={this.setTextarea}
+        <Textarea
+          inputRef={this.setTextarea}
           className='autosuggest-textarea__textarea'
           disabled={disabled}
           placeholder={placeholder}