fix: non field errors

Author: SKairinos

src/components/form/Form.tsx

@@ -45,7 +45,7 @@ const NonFieldErrors: FC<NonFieldErrorsProps> = ({
 }
 
 export type FormErrors<Values> = FormikErrors<
-  Omit<Values, "non_field_errors"> & { non_field_errors: string }
+  Omit<Values, "__all__"> & { __all__: string }
 >
 
 type _FormikProps<Values> = Omit<FormikProps<Values>, "errors"> & {
@@ -63,38 +63,38 @@ const BaseForm = <Values extends FormValues>({
   children,
   scrollIntoViewOptions = SCROLL_INTO_VIEW_OPTIONS,
   nonFieldErrorsProps,
-  fieldRefs,
+  fieldRefs = [],
   ...otherFormikProps
 }: BaseFormProps<Values>) => (
   <Formik {...otherFormikProps}>
     {/* @ts-expect-error */}
     {(formik: _FormikProps<Values>) => {
-      let nonFieldErrors: undefined | JSX.Element = undefined
-      if (Object.keys(formik.errors).length) {
-        if (typeof formik.errors.non_field_errors === "string") {
-          nonFieldErrors = (
-            <NonFieldErrors {...nonFieldErrorsProps}>
-              {formik.errors.non_field_errors}
-            </NonFieldErrors>
-          )
-        }
-        // If a submission was attempted and refs to the fields were provided.
-        else if (formik.isSubmitting && fieldRefs && fieldRefs.length) {
-          const errorNames = getKeyPaths(formik.errors)
-
-          const inputRef = fieldRefs.find(({ name }) =>
-            errorNames.includes(name),
-          )?.inputRef
-
-          if (inputRef?.current) {
-            inputRef.current.scrollIntoView(scrollIntoViewOptions)
-          }
-        }
+      const hasErrors = Boolean(Object.keys(formik.errors).length)
+      const hasNonFieldErrors =
+        hasErrors && typeof formik.errors.__all__ === "string"
+
+      // If a submission was attempted and refs to the fields were provided.
+      if (
+        hasErrors &&
+        !hasNonFieldErrors &&
+        formik.isSubmitting &&
+        fieldRefs.length
+      ) {
+        const errorNames = getKeyPaths(formik.errors)
+
+        const input = fieldRefs.find(({ name }) => errorNames.includes(name))
+          ?.inputRef.current
+
+        if (input) input.scrollIntoView(scrollIntoViewOptions)
       }
 
       return (
         <>
-          {nonFieldErrors}
+          {hasNonFieldErrors && (
+            <NonFieldErrors {...nonFieldErrorsProps}>
+              {formik.errors.__all__ as string}
+            </NonFieldErrors>
+          )}
           <FormikForm>
             {typeof children === "function" ? children(formik) : children}
           </FormikForm>