chore: moved feedback error notification

packages/react/src/components/Field/FieldFeedback.tsx

@@ -14,24 +14,21 @@ export const FieldFeedback: React.FunctionComponent<FieldFeedbackProps> = ({
 }: FieldFeedbackProps) => {
 	const Errors = React.useMemo(() => {
 		if (!errors || !errors.length) return null;
-		return (
+
+		return errors.map((err) => <li key={err}>{err}</li>);
+	}, [errors]);
+
+	return (
+		<div id={id} className={className}>
 			<ul
 				className={errorsClass}
 				id={errorsId}
 				aria-label="Errors"
 				aria-live={liveErrors ? 'assertive' : undefined}
 				aria-atomic={liveErrors ? 'true' : undefined}
 			>
-				{errors.map((err) => (
-					<li key={err}>{err}</li>
-				))}
+				{Errors}
 			</ul>
-		);
-	}, [errors, errorsClass, errorsId, liveErrors]);
-
-	return (
-		<div id={id} className={className}>
-			{Errors}
 			{children}
 		</div>
 	);

packages/react/src/components/TextField/index.stories.tsx

@@ -16,6 +16,7 @@ export default {
 			control: { type: 'range', min: 5, step: 1 },
 		},
 		validateOnChange: { control: { type: 'boolean' } },
+		validateOnDOMChange: { control: { type: 'boolean' } },
 	},
 } as Meta<TextFieldProps>;
 

packages/react/src/components/TextField/index.test.tsx

@@ -63,7 +63,7 @@ test('validation errors are not rendered in the field feedback on DOM `input` by
 	await user.keyboard('abc');
 
 	const errList = screen.queryByRole('list', { name: 'Errors' });
-	t.falsy(errList);
+	t.falsy(errList?.children.length);
 });
 
 test('validation errors are rendered in the field feedback on DOM `input` when `validateOnChange` is true', async (t) => {
@@ -80,7 +80,7 @@ test('validation errors are rendered in the field feedback on DOM `input` when `
 	await user.keyboard('abc');
 
 	const errList = screen.queryByRole('list', { name: 'Errors' });
-	t.truthy(errList);
+	t.truthy(errList?.children);
 });
 
 test('the error list is not rendered when there are no errors', async (t) => {
@@ -95,7 +95,7 @@ test('the error list is not rendered when there are no errors', async (t) => {
 	await user.tab();
 
 	const errList = screen.queryByRole('list', { name: 'Errors' });
-	t.falsy(errList);
+	t.falsy(errList?.children.length);
 });
 
 test('invalid input is reflected in both constraint validation and in ARIA', async (t) => {