Merge pull request #1167 from vanya829/fix-validation-errors-for-nest…

…ed-fields fix validation errors for nested form field
lookfirst · May 16, 2024 · 0bf636c · 0bf636c
2 parents f531eee + ffdce3b
commit 0bf636c
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 1 deletion.
diff --git a/src/Validation.ts b/src/Validation.ts
@@ -46,7 +46,7 @@ function normalizeValidationError(err: YupValidationError, translator?: Translat
 		const el: ReturnType<Translator> = translator ? translator(innerError) : message;
 
 		// eslint-disable-next-line no-prototype-builtins
-		if (path && errors.hasOwnProperty(path)) {
+		if (path && get(errors, path)) {
 			const prev = get(errors, path);
 			prev.push(el);
 			set(errors, path, prev);

diff --git a/test/Validate.test.tsx b/test/Validate.test.tsx
@@ -177,5 +177,47 @@ describe('Validate', () => {
 
 			expect(container).toMatchSnapshot();
 		});
+
+		it('can render multiple errors in nested form fields structure', async () => {
+			function TextFieldComponent({ validator }: { validator?: any }) {
+				return (
+					<Form
+						onSubmit={jest.fn}
+						validate={validator}
+						render={({ handleSubmit }) => (
+							<form onSubmit={handleSubmit} noValidate>
+								<TextField label="Test with parent" name="parent.hello" required={true} />
+							</form>
+						)}
+					/>
+				);
+			}
+			const validateSchema = makeValidateSync(
+				Yup.object().shape({
+					parent: Yup.object().shape({
+						hello: Yup.string().required().min(10).email(),
+					}),
+				}),
+				myExtendedTranslatorFunction,
+			);
+
+			const { findAllByTestId, container } = render(<TextFieldComponent validator={validateSchema} />);
+			const input = container.querySelector('input') as HTMLInputElement;
+
+			// ensure the validation is made and errors are rendered
+			fireEvent.focus(input);
+			fireEvent.change(input, {
+				target: { value: 'no email' },
+			});
+			fireEvent.blur(input);
+
+			// find error fields
+			const errors = await findAllByTestId('error_field'); // validation is async, so we have to await
+			expect(errors).toHaveLength(2);
+			expect(getNodeText(errors[0])).toContain('field_too_short: parent.hello');
+			expect(getNodeText(errors[1])).toContain('field_not_email: parent.hello');
+
+			expect(container).toMatchSnapshot();
+		});
 	});
 });
diff --git a/test/__snapshots__/Validate.test.tsx.snap b/test/__snapshots__/Validate.test.tsx.snap
@@ -64,6 +64,81 @@ exports[`Validate multiple validation errors can render multiple errors 1`] = `
 </div>
 `;
 
+exports[`Validate multiple validation errors can render multiple errors in nested form fields structure 1`] = `
+<div>
+  <form
+    novalidate=""
+  >
+    <div
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
+    >
+      <label
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-error MuiFormLabel-filled Mui-required MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
+        data-shrink="true"
+        for=":r2:"
+        id=":r2:-label"
+      >
+        Test with parent
+        <span
+          aria-hidden="true"
+          class="MuiFormLabel-asterisk MuiInputLabel-asterisk Mui-error css-wgai2y-MuiFormLabel-asterisk"
+        >
+           
+          *
+        </span>
+      </label>
+      <div
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-error MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
+      >
+        <input
+          aria-describedby=":r2:-helper-text"
+          aria-invalid="true"
+          class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
+          id=":r2:"
+          name="parent.hello"
+          required=""
+          type="text"
+          value="no email"
+        />
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+        >
+          <legend
+            class="css-14lo706"
+          >
+            <span>
+              Test with parent
+               
+              *
+            </span>
+          </legend>
+        </fieldset>
+      </div>
+      <p
+        class="MuiFormHelperText-root Mui-error MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled Mui-required css-1wc848c-MuiFormHelperText-root"
+        id=":r2:-helper-text"
+      >
+        <span
+          data-testid="error_field"
+        >
+          field_too_short
+          : 
+          parent.hello
+        </span>
+        <span
+          data-testid="error_field"
+        >
+          field_not_email
+          : 
+          parent.hello
+        </span>
+      </p>
+    </div>
+  </form>
+</div>
+`;
+
 exports[`Validate multiple validation errors can render multiple errors in separate elements 1`] = `
 <div>
   <form