Enhance error list rendering: add smooth scroll and focus behavior fo…

…r alert component Refs: #7323
public-ui · Jan 29, 2025 · abeeb41 · abeeb41
1 parent de57a18
commit abeeb41
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/packages/components/src/components/form/shadow.tsx b/packages/components/src/components/form/shadow.tsx
@@ -60,7 +60,20 @@ export class KolForm implements FormAPI {
 
 	private renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {
 		return (
-			<KolAlertFc class="kol-form__alert" type="error" variant="card" label={translate('kol-error-list-message')}>
+			<KolAlertFc
+				class="kol-form__alert"
+				ref={(el) => {
+					setTimeout(() => {
+						if (el && typeof el.focus === 'function') {
+							el.scrollIntoView({ behavior: 'smooth' });
+							el.focus();
+						}
+					}, 250);
+				}}
+				type="error"
+				variant="card"
+				label={translate('kol-error-list-message')}
+			>
 				<nav aria-label={translate('kol-error-list')}>
 					<ul>
 						{errorList?.map((error, index) => (