fix: native validation with inputs array (#329)

Author: jorisre

src/__tests__/validateFieldsNatively.ts

@@ -5,7 +5,7 @@ const flatObject: Record<string, FieldError> = {
   name: { type: 'st', message: 'first message' },
 };
 
-const fields = {
+const getfields = (mockReportValidity: any, mockSetCustomValidity: any) => ({
   name: {
     ref: {
       reportValidity: jest.fn(),
@@ -18,9 +18,23 @@ const fields = {
       setCustomValidity: jest.fn(),
     },
   },
-} as any as Record<InternalFieldName, Field['_f']>;
+  array: {
+    refs: [{
+      reportValidity: mockReportValidity,
+      setCustomValidity: mockSetCustomValidity,
+    }, {
+      reportValidity: mockReportValidity,
+      setCustomValidity: mockSetCustomValidity,
+    }]
+
+  }
+}) as any as Record<InternalFieldName, Field['_f']>;
 
 test('validates natively fields', () => {
+  const mockReportValidity = jest.fn();
+  const mockSetCustomValidity = jest.fn();
+  const fields = getfields(mockReportValidity, mockSetCustomValidity)
+
   validateFieldsNatively(flatObject, {
     fields,
     shouldUseNativeValidation: true,
@@ -39,4 +53,7 @@ test('validates natively fields', () => {
   expect(
     (fields.nd.ref as HTMLInputElement).reportValidity,
   ).toHaveBeenCalledTimes(1);
+
+  expect((mockReportValidity)).toHaveBeenCalledTimes(2);
+  expect((mockSetCustomValidity)).toHaveBeenCalledTimes(2);
 });

src/validateFieldsNatively.ts

@@ -1,19 +1,29 @@
-import { get, FieldError, ResolverOptions } from 'react-hook-form';
+import {
+  get, FieldError, ResolverOptions, Ref
+} from 'react-hook-form';
+
+const setCustomValidity = (ref: Ref, fieldPath: string, errors: Record<string, FieldError>) => {
+  if (ref && 'reportValidity' in ref) {
+    const error = get(errors, fieldPath) as FieldError | undefined;
+    ref.setCustomValidity((error && error.message) || '');
+
+    ref.reportValidity();
+  }
+};
 
 // Native validation (web only)
 export const validateFieldsNatively = <TFieldValues>(
   errors: Record<string, FieldError>,
   options: ResolverOptions<TFieldValues>,
 ): void => {
+
+
   for (const fieldPath in options.fields) {
     const field = options.fields[fieldPath];
-
     if (field && field.ref && 'reportValidity' in field.ref) {
-      const error = get(errors, fieldPath) as FieldError | undefined;
-
-      field.ref.setCustomValidity((error && error.message) || '');
-
-      field.ref.reportValidity();
+      setCustomValidity(field.ref, fieldPath, errors)
+    } else if (field.refs) {
+      field.refs.forEach((ref: HTMLInputElement, i) => setCustomValidity(ref, fieldPath + '.' + i, errors))
     }
   }
 };

yarn.lock

@@ -1494,7 +1494,7 @@
     source-map "^0.6.1"
     write-file-atomic "^3.0.0"
 
-"@jest/types@^27.4.2":
+"@jest/types@^27.2.5", "@jest/types@^27.4.2":
   version "27.4.2"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.4.2.tgz#96536ebd34da6392c2b7c7737d693885b5dd44a5"
   integrity sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==
@@ -2886,7 +2886,7 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
-diff-sequences@^27.4.0:
+diff-sequences@^27.0.6, diff-sequences@^27.4.0:
   version "27.4.0"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.4.0.tgz#d783920ad8d06ec718a060d00196dfef25b132a5"
   integrity sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww==
@@ -4117,7 +4117,7 @@ jest-environment-node@^27.4.6:
     jest-mock "^27.4.6"
     jest-util "^27.4.2"
 
-jest-get-type@^27.4.0:
+jest-get-type@^27.3.1, jest-get-type@^27.4.0:
   version "27.4.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.4.0.tgz#7503d2663fffa431638337b3998d39c5e928e9b5"
   integrity sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==
@@ -5614,7 +5614,7 @@ pretty-format@^27.0.0, pretty-format@^27.0.2:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-format@^27.4.6:
+pretty-format@^27.3.1, pretty-format@^27.4.6:
   version "27.4.6"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.4.6.tgz#1b784d2f53c68db31797b2348fa39b49e31846b7"
   integrity sha512-NblstegA1y/RJW2VyML+3LlpFjzx62cUrtBIKIWDXEDkjNeleA7Od7nrzcs/VLQvAeV4CgSYhrN39DRN88Qi/g==