Add row to text area when user type

Question

Hi i have component that adds textarea. I want to dynamic change number of visible rows when user typing. I want to extend whole text area without scroll. I want to add row when text goes to another row. This is my component below. I am using react and typescript in my project. I want simple solution for this.

import React, { forwardRef, useState } from 'react';
import { ChangeHandler, FieldErrors } from 'react-hook-form';
import { mergeClasses } from 'utils';

export interface TextareaProps {
  name: string;
  onChange: ChangeHandler;
  onBlur: ChangeHandler;
  initialValue?: string;
  placeholder?: string;
  label?: string;
  disabled?: boolean;
  className?: string;
  errors?: FieldErrors;
  isRequired?: boolean;
  maxLength?: number;
}

const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  (
    {
      label,
      placeholder,
      initialValue,
      onChange,
      onBlur,
      name,
      disabled,
      className = '',
      errors,
      isRequired = false,
      maxLength,
    },
    ref,
  ) => {
    const [value, setValue] = useState(initialValue);

    const fieldError = errors && errors[name];

    const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
      onChange(e);
      setValue(e.target.value);
    };

    return (
      <div className={mergeClasses('relative', className)}>
        {label ? (
          <InputLabel
            behavior="shrink"
            disabled={disabled}
            htmlFor={name}
            isActive={value !== ''}
            isRequired={isRequired}
            label={label}
          />
        ) : null}

        <textarea
          className="block w-full h-full p-4 text-sm border rounded-sm resize-none border-grey-300 text-grey-900 hover:border-primary-500 disabled:cursor-not-allowed disabled:hover:border-grey-300 disabled:bg-grey-100 disabled:text-grey-700"
          defaultValue={initialValue}
          disabled={disabled}
          maxLength={maxLength}
          name={name}
          onBlur={onBlur}
          onChange={onChangeHandler}
          placeholder={placeholder}
          ref={ref}
          rows={4}
        />
        <Error errorMessage={fieldError} />
      </div>
    );
  },
);

export default Textarea;

Answer 1

This using JavaScript Code.

JS function:

function auto_grow(element) {
    element.style.height = "5px";
    element.style.height = (element.scrollHeight)+"px";
}

CSS:

textarea {
    resize: none;
    overflow: hidden;
    min-height: 50px;
    max-height: 100px;
}

onInput event of TextArea:

<textarea oninput="auto_grow(this)"></textarea>

if you are using react with type script you can do like this:

<textarea onInput={(e: React.FormEvent<HTMLTextAreaElement>) => {
              e.currentTarget.style.height = '5px'
              e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px'
          }}
            />