@digigov/form 2.0.0-a402a664 → 2.0.0-abd768eb

package/src/Field/FieldBaseContainer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentRef } from 'react';
 import { FieldContainerProps } from '@digigov/form/Field/types';
 import Label from '@digigov/form/inputs/Label';
 import { ErrorMessage } from '@digigov/react-core/ErrorMessage';
@@ -9,56 +9,72 @@ import LabelContainer from '@digigov/react-core/LabelContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const FieldBaseContainer: React.FC<FieldContainerProps> = ({
-  name,
-  wrapper,
-  label,
-  children,
-  error,
-  hasError,
-  layout,
-  controlled,
-  labelSize = 'sm',
-}) => {
-  const { t } = useTranslation();
-  const errorMessage = error?.message.key
-    ? error.message.key
-    : error?.message || '';
-  const errorContext = error?.message.context || {};
-  if (wrapper === 'fieldset') {
-    return (
-      <FieldContainer error={hasError} {...layout}>
-        <Fieldset {...(controlled && { tabIndex: -1 })}>
-          <FieldsetLegend size={labelSize}>
-            {label && label.primary}
-          </FieldsetLegend>
-          {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
-          {error && (
-            <ErrorMessage id={`${name}-error`}>
-              {t(errorMessage, errorContext)}
-            </ErrorMessage>
-          )}
-          {children}
-          {label && label.hint && <Hint size="sm">{label.hint}</Hint>}
-        </Fieldset>
-      </FieldContainer>
-    );
-  } else {
-    return (
-      <FieldContainer error={hasError} {...layout}>
-        <LabelContainer>
-          {label && <Label label={label} />}
-          {error && (
-            <ErrorMessage id={`${name}-error`}>
-              {t(errorMessage, errorContext)}
-            </ErrorMessage>
-          )}
-          {children}
-          {label && label.hint && <Hint size="sm">{label.hint}</Hint>}
-        </LabelContainer>
-      </FieldContainer>
-    );
+export const FieldBaseContainer = React.forwardRef<
+  ComponentRef<typeof Fieldset>,
+  FieldContainerProps
+>(
+  (
+    {
+      name,
+      wrapper,
+      label,
+      children,
+      error,
+      hasError,
+      layout,
+      controlled,
+      labelSize = 'sm',
+    },
+    ref
+  ) => {
+    const { t } = useTranslation();
+    const errorMessage = error?.message.key
+      ? error.message.key
+      : error?.message || '';
+    const errorContext = error?.message.context || {};
+    if (wrapper === 'fieldset') {
+      return (
+        <FieldContainer error={hasError} {...layout}>
+          <Fieldset
+            ref={ref}
+            className="outline-none"
+            {...(controlled && {
+              tabIndex: -1,
+            })}
+          >
+            <FieldsetLegend size={labelSize}>
+              {label && label.primary}
+            </FieldsetLegend>
+            {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
+            {error && (
+              <ErrorMessage id={`${name}-error`}>
+                {t(errorMessage, errorContext)}
+              </ErrorMessage>
+            )}
+            {children}
+            {label && label.hint && <Hint size="sm">{label.hint}</Hint>}
+          </Fieldset>
+        </FieldContainer>
+      );
+    } else {
+      return (
+        <FieldContainer error={hasError} {...layout}>
+          <LabelContainer>
+            {label && <Label label={label} />}
+            {error && (
+              <ErrorMessage id={`${name}-error`}>
+                {t(errorMessage, errorContext)}
+              </ErrorMessage>
+            )}
+            {children}
+            {label && label.hint && <Hint size="sm">{label.hint}</Hint>}
+          </LabelContainer>
+        </FieldContainer>
+      );
+    }
   }
-};
+);
+
+FieldBaseContainer.displayName = 'FieldBaseContainer';
 
 export default FieldBaseContainer;

package/src/FieldArray/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
 import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
 import { FieldProps } from '@digigov/form/Field/types';
@@ -43,11 +43,38 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
     name,
   });
   const fields = getValues(name) || [];
+
+  /** The ref of the FieldBaseContainer. */
+  const containerRef = useRef<HTMLFieldSetElement | null>(null);
+
+  const { errors } = formState;
+
+  // Focus the fieldset when there are errors related to this field array
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const fieldErrors = Object.keys(errors);
+    // no errors
+    if (!fieldErrors.length) return;
+
+    if (
+      // Check if there are errors related to the current field array
+      fieldErrors.some((key) => {
+        const fieldArrayName = key.split('.')[0];
+        return fieldArrayName === name;
+      })
+    ) {
+      if (containerRef.current && errors[name]) {
+        containerRef.current.focus();
+      }
+    }
+  }, [errors, name]);
+
   return (
     <FieldBaseContainer
       label={label}
       layout={layout}
       register={register}
+      ref={containerRef}
       error={error?.message && error ? error : undefined}
       hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
       wrapper="fieldset"

package/src/FormBuilder/index.tsx

@@ -44,7 +44,6 @@ const FormBase = React.forwardRef(function FormBase(
   const handleSubmit = useCallback(
     (data: FormData): void => {
       if (onSubmit) {
-        form.reset(data);
         onSubmit(data);
       }
     },