From 76a2175bdc9b0b1e75b61d0c5455af01e8d08720 Mon Sep 17 00:00:00 2001
From: Lucas Contreras <cont.lucas@gmail.com>
Date: Fri, 1 Dec 2023 12:32:48 -0300
Subject: [PATCH] chore: moved feedback error notification

---
 .../src/components/Field/FieldFeedback.tsx      | 17 +++++++----------
 .../src/components/TextField/index.stories.tsx  |  1 +
 .../src/components/TextField/index.test.tsx     |  6 +++---
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/components/Field/FieldFeedback.tsx b/packages/react/src/components/Field/FieldFeedback.tsx
index 80906a771..f07795ab5 100644
--- a/packages/react/src/components/Field/FieldFeedback.tsx
+++ b/packages/react/src/components/Field/FieldFeedback.tsx
@@ -14,7 +14,12 @@ 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}
@@ -22,16 +27,8 @@ export const FieldFeedback: React.FunctionComponent<FieldFeedbackProps> = ({
 				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>
 	);
diff --git a/packages/react/src/components/TextField/index.stories.tsx b/packages/react/src/components/TextField/index.stories.tsx
index aece4467c..bc377d401 100644
--- a/packages/react/src/components/TextField/index.stories.tsx
+++ b/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>;
 
diff --git a/packages/react/src/components/TextField/index.test.tsx b/packages/react/src/components/TextField/index.test.tsx
index 854474e39..ada792841 100644
--- a/packages/react/src/components/TextField/index.test.tsx
+++ b/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) => {