Autogrowing textarea, the simplest way, because I suck at css and react is awesome

[xcaeser]

import * as React from "react";

import { cn } from "@/lib/utils";

export interface TextareaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  customRows: number;
  setCustomRows: (rows: number) => void;
}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, customRows, setCustomRows, ...props }, ref) => {
    const maxRows = 9;

    const handleTextareaChange = (
      event: React.ChangeEvent<HTMLTextAreaElement>,
    ) => {
      const textareaLineHeight = 16; // Ensure this matches your CSS
      event.target.rows = 1; // Temporarily reset rows to recalculate

      const currentRows = Math.floor(
        (event.target.scrollHeight + 2) / textareaLineHeight,
      ); // +2 as a buffer

      if (currentRows >= maxRows) {
        event.target.rows = maxRows; // Cap the rows at maxRows
        event.target.scrollTop = event.target.scrollHeight; // Adjust scroll to new height
      } else {
        event.target.rows = currentRows; // Adjust rows to fit content
      }

      setCustomRows(event.target.rows); // Sync state with the current row count
    };

    return (
      <textarea
        rows={customRows}
        onChange={handleTextareaChange}
        className={cn(
          "flex w-full justify-center bg-transparent p-px leading-4 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
          className,
        )}
        ref={ref}
        {...props}
      />
    );
  },
);
Textarea.displayName = "Textarea";

export { Textarea };