TextArea Auto resize

Question

What I'm trying to achieve is a textarea that auto resizes when user continues to type or pastes a long text into text area.

This is what I have.

class TextArea extends InputBase {

    render() {
        const { label, placeholder, wrap, rows, cols, disabled, style, textStyle, textClass, value } = this.props;

        return (
            <div className={formClass} style={style}>
                {!!label && (<label className="control-label" htmlFor={this.id}>{label}</label>)}
                <textarea id={this.id} className={`form-control ${textClass}`} placeholder={placeholder} disabled={disabled} style={textStyle}
                    rows={rows} cols={cols} wrap={wrap} value={this.state.value || ''}
                    onChange={this.onChange} onBlur={this.onBlur} onFocus={this.onFocus} onKeyPress={this.onKeyPresses} onKeyUp={this.onKeyUp}>{value}</textarea>
            </div>
        );
    }
}

Any suggestion for how I might be able to resize the textarea so it will expand according to the length of content in textarea.

Answer 1

You can solve this mostly with CSS using an approach that's outlined in css-tricks.com.

The solution is to put your textarea inside a div, make your div match the styling of the textarea, then use display:grid to make the textarea expand to fill its parent container as it grows:

.grow-wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}

.grow-wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";
  /* This is how textarea text behaves */
  white-space: pre-wrap;
  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}

.grow-wrap>textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
  resize: none;
  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}

.grow-wrap>textarea,
.grow-wrap::after {
  /* Identical styling required!! */
  border: 1px solid black;
  padding: 0.5rem;
  font: inherit;
  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}

<div class="grow-wrap">
  <textarea name="text" id="text" onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>
</div>