How to change the height of textarea with content?

Question

I am trying to change the height of the textarea as per the content height. I see that the event handler doesn't change the height since it is getting overwritten by the bootstrap style. Please help!

class PostForm extends React.Component {
  constructor(props){
    super(props);
    this.state = {titleHeight: '30', storyHeight: 1};                                                    
    this.handleKeyUp = this.handleKeyUp.bind(this);
  }
  handleKeyUp(event){
    this.setState({titleHeight: document.getElementById('post_title').scrollHeight});
    this.setState({storyHeight: document.getElementById('post_story').scrollHeight});
  }
  render () {
        var csrfToken = $('meta[name=csrf-token]').attr('content');
        return (
          <form action='create' method='post' acceptCharset='UTF-8' className= "form-group">
            <input type='hidden' name='_method' value='patch'/>
            <input type='hidden' name='utf8' value='✓' />
            <input type='hidden' name='authenticity_token' value={csrfToken} />
            <textarea id="post_title" name="post[title]" className="form-control boldText" style={formStyle.textArea} height={this.state.titleHeight} onKeyUp={this.handleKeyUp} placeholder="Title"/>
            <textarea id="post_story" name="post[story]" className="form-control" style={formStyle.textArea} height={this.state.storyHeight} onKeyUp={this.handleKeyUp} placeholder="Start telling the story"/>
            <input name="commit" type="submit" value="Post" className="btn" style={formStyle.button}/>
          </form>
        );
  }
}

const formStyle = {
  textArea: {
    border: 5,
    boxShadow: 'none',
    margin: 5,
    overflow: 'hidden',
    resize: 'none',
    ariaHidden: 'true',
  },
  button: {
    backgroundColor: 'black',
    color: 'white',
    width: 70,
    marginLeft: 18,
    marginRight: 5,
  },
}

Solution 1

The textarea HTML component has no attribute height but an attribute rows that you can use for that purpose (e.g. <textarea rows={Math.round(this.state.storyHeight)} ... />).

No CSS style will override what you pass in the style attribute, it works the opposite way. But there is no height in your formStyle definition anyway.

Solution 2

This code can change the textarea height even if it has some text initially, and even after on any change :)

export default class dynamicTextArea extends Component {
    constructor(props){
        super(props);

        this.textAreaRef = React.createRef();
    }

    componentDidMount() {
        this.textareaChange(this.textAreaRef.current);
    }

    textareaChange(ta) {
        ta.style.height = "auto";
        ta.style.height = ta.scrollHeight + "px";
    }

    render() {
        return(
            <textarea
                ref={this.textAreaRef}
                onChange={(e) => this.textAreaChange(e.target)}
            />
        );
    }
}

If you want to decrease the initial height even more then change:

ta.style.height = "auto";

to

ta.styel.height = "30px"; // better if equal to line-height

Comments

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.