How to make textarea expand when click into it?-CodePudding

I am trying to create onClick function that when user click into textarea it auto fully expand.

Here is my code base:

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>
      );
    }
   ...
  }
}

export default DynamicWidthInput;

Here is how I display textarea:

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

Here is how my project look like:

Expected fully display like this:

CodePudding user response：

I think you can use this style.

textarea {
    transition: all .3s ease;
    height: 100px;
}

textarea:focus {
    height: 300px;
}