Estoy tratando de hacer que el área de texto se expanda cuando ingreso algo de texto en él, estoy usando focus css para que se expanda, pero cuando hago clic fuera del área de texto, volverá a su valor predeterminado.

Aquí está mi base de código:

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

y aquí está mi estilo.css:

 .dynamic-textarea { text-align: left; transition: all .3s ease; height: 60px; } .dynamic-textarea:focus { height: 150px; width: 650px !important; }

¿Cómo puedo lograr la función cuando hay texto en el área de texto que se expandirá automáticamente? estoy usando reaccionar

Componente actualizado y agregado 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> ); }