title: Using Textarea inside of styled components makes it write backwards by resetting position of cursor in ReactJS
body: <p>I am using <code>Textarea</code> from <code>react-textarea-autosize</code> and <code>styled</code> from <code>styled components</code>. I am writing a <code>renderForm</code> function inside a class which renders a form including a <code>StyledTextarea</code>. After analyzing, I have found out that using the Styled, each time I write a character, the positon of the cursor resets in the beginning so it makes it write backwards. 
  I have checked using just a simple <code>&lt;input&gt;</code>, just a simple <code>&lt;Textarea&gt;</code> and all of them works normally. Just when I add the styled component, it behaves like this. The code snippet is given below:</p>
  
  <pre><code>class ActionButton extends Component {
      renderForm() {
          const StyledTextarea = 
              styled(Textarea)`
              resize: none;
              width: 100%;
              overflow: hidden;
              outline: none;
              border: none;
            `; 
  
          return (
              &lt;StyledTextarea
              autoFocus
              onBlur={this.closeForm}
              value={this.state.text}
              onChange={this.handleInputChange}
            /&gt;
          );
      }
  
      render() {
          return renderForm();
      }
  }
  </code></pre>
  
  <p>This is my first post in stackoverflow. Please pardon any mistakes.</p>