fix: add input scroll into view

src/components/form/TextAreaInput/TextAreaInput.tsx

@@ -1,5 +1,6 @@
 import { motion, type HTMLMotionProps } from "motion/react";
 import clsx, { type ClassValue } from "clsx";
+import type { FocusEvent } from "react";
 
 import classes from "./TextAreaInput.module.css";
 
@@ -8,10 +9,21 @@ type Props = Omit<HTMLMotionProps<"textarea">, "className"> & {
   error?: boolean;
 };
 
-export default function TextAreaInput({ className, error, ...props }: Props) {
+export default function TextAreaInput({ className, error, onFocus, ...props }: Props) {
+  const handleFocus = (e: FocusEvent<HTMLTextAreaElement>) => {
+    onFocus?.(e);
+    const target = e.target;
+    setTimeout(() => {
+      if (target.isConnected) {
+        target.scrollIntoView({ block: "center", behavior: "smooth" });
+      }
+    }, 100);
+  };
+
   return (
     <motion.textarea
       {...props}
+      onFocus={handleFocus}
       className={clsx(classes.input, error && classes.error, className)}
     />
   );