feat: auto scroll to AlertErrorList if AlertErrorList is showing

src/components/helper/form/FormErrors.tsx

@@ -1,8 +1,10 @@
+'use client';
+
 import Alert from '@/components/Alert';
 import Button from '@/components/Button';
 import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
-import { useState } from 'react';
+import { useEffect, useRef } from 'react';
 
 /**
  * Alert Unique Error List
@@ -29,10 +31,22 @@ const AlertErrorList = ({
   onClose: () => void;
   title?: string;
 }) => {
+  const alertRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (formErrorList.length > 0) {
+      alertRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    }
+  }, [formErrorList.length]);
+
   if (formErrorList.length === 0) return null;
 
   return (
     <Alert
+      ref={alertRef}
       color='error'
       className={cn(
         'w-full flex flex-col gap-2 px-3 rounded-lg',
@@ -57,6 +71,7 @@ const AlertErrorList = ({
           </span>
         </div>
         <Button
+          type='button'
           onClick={onClose}
           variant='link'
           className={cn('ml-auto p-0 w-fit text-white', className?.button)}