How to make textarea expand when there is some value

Question

I am trying to make textarea expand when I enter some text into it, I am using focus css to make it expand but when I click out of textarea it will get back to default.

Here is my code base:

<DynamicWidthInput
  id="addLoanClause"
  value={addLoanClause}
  type="textarea"
  placeholder=""
  error={showErrors && getError("addLoanClause")}
  onChange={e =>
    handleDynamicStateChange(e, setAddLoanClause)
  }
  size={"xl"}
  rows="5"
/>

and here is my style.css:

.dynamic-textarea {
  text-align: left;
  transition: all .3s ease;
  height: 60px;
}

.dynamic-textarea:focus {
  height: 150px;
  width: 650px !important;
}

How can I achieve feature when there is some text in textarea it will automatically expand? I am using React

Updated and added component DynamicWidthInput.js:

class DynamicWidthInput extends React.Component {
  componentDidMount() {
    const { id, value } = this.props;
    resizable(document.getElementById(id), 16, value);
  }

  componentDidUpdate(prevProps) {
    const { id, value } = this.props;

    if (this.props.value !== prevProps.value) {
      resizable(document.getElementById(id), 16, value);
    }
  }

  render() {
    const { id, placeholder, type, onChange, value, error, size } = this.props;
    if (type === "textarea") {
      return (
        <div style={{ display: "inline-block", verticalAlign: "top" }}>
          <textarea
            className={`input dynamic-input dynamic-textarea ${size}`}
            id={id}
            onChange={onChange}
            placeholder={placeholder}
            value={value}
            wrap="soft"
            maxLength="1000"
            {...this.props}
          />
          {error && <p className="help is-danger">{error.message}</p>}
        </div>
      );
    }

Answer 1

You can change dynamically the rows attribute in the textarea when a change happens.

Here's a Codepen with an example: https://codepen.io/JaKto/pen/qeBpZM