refactor: error list on KolForm scroll manually (#7380)

packages/components/src/components/form/shadow.tsx

@@ -47,16 +47,13 @@ export class KolForm implements FormAPI {
 		}
 	};
 
+	private readonly setBlockElement = (el?: HTMLElement) => (this.errorListBlock = el);
+
+	private readonly setFirstLinkElement = (el?: HTMLElement) => (this.errorListFirstLink = el);
+
 	private renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {
 		return (
-			<KolAlertFc
-				ref={(el) => {
-					this.errorListBlock = el;
-				}}
-				type="error"
-				variant="card"
-				label={translate('kol-error-list-message')}
-			>
+			<KolAlertFc ref={this.setBlockElement} type="error" variant="card" label={translate('kol-error-list-message')}>
 				<nav aria-label={translate('kol-error-list')}>
 					<ul>
 						{errorList?.map((error, index) => (
@@ -65,11 +62,7 @@ export class KolForm implements FormAPI {
 									_href=""
 									_label={error.message}
 									_on={{ onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }}
-									ref={(el) => {
-										if (index === 0) {
-											this.errorListFirstLink = el;
-										}
-									}}
+									ref={index === 0 ? this.setFirstLinkElement : undefined}
 								/>
 							</li>
 						))}

packages/samples/react/src/components/form/error-list.tsx

@@ -1,10 +1,22 @@
 import { KolButton, KolForm, KolInputText } from '@public-ui/react';
 import type { FC } from 'react';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const FormErrorList: FC = () => {
 	const formRef = useRef<HTMLKolFormElement | null>(null);
+
+	const scrollTo = () => {
+		formRef.current?.focusErrorList();
+	};
+
+	/**
+	 * Simulate the form submission
+	 */
+	useEffect(() => {
+		formRef.current?.focusErrorList();
+	}, []);
+
 	return (
 		<>
 			<SampleDescription>
@@ -14,26 +26,42 @@ export const FormErrorList: FC = () => {
 			<KolForm
 				className="w-full"
 				ref={formRef}
+				_on={{
+					onSubmit: scrollTo,
+				}}
 				_errorList={[
 					{
 						message: 'Error in Input 2',
 						selector: '#input2',
 					},
+					{
+						message: 'Error in Input 3',
+						selector: () => alert('Error in Input 3'),
+					},
 				]}
 			>
 				<div className="grid gap-2">
 					<KolInputText id="input1" _label="Input 1" />
-					<KolInputText id="input2" _label="Input 2" _touched _msg={{ _description: 'Input error', _type: 'error' }} />
-					<KolInputText id="input3" _label="Input 3" />
+					<KolInputText
+						id="input2"
+						_label="Input 2"
+						_touched
+						_msg={{
+							_description: 'Input error',
+							_type: 'error',
+						}}
+					/>
+					<KolInputText
+						id="input3"
+						_label="Input 3"
+						_touched
+						_msg={{
+							_description: 'Input error',
+							_type: 'error',
+						}}
+					/>
 					<div>
-						<KolButton
-							_label="ScrollTo"
-							_on={{
-								onClick: () => {
-									formRef.current?.focusErrorList();
-								},
-							}}
-						/>
+						<KolButton _label="ScrollTo" _type="submit" />
 					</div>
 				</div>
 			</KolForm>