Merge branch 'main' into portal-frontend-40

Author: SKairinos

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [2.6.10](https://github.com/ocadotechnology/codeforlife-package-javascript/compare/v2.6.9...v2.6.10) (2025-02-25)
+
+
+### Bug Fixes
+
+* non field errors ([dddf8d5](https://github.com/ocadotechnology/codeforlife-package-javascript/commit/dddf8d5d1990c201ef72eff74b2d4f260ce4c7a4))
+
+## [2.6.9](https://github.com/ocadotechnology/codeforlife-package-javascript/compare/v2.6.8...v2.6.9) (2025-02-25)
+
+
+### Bug Fixes
+
+* rename property ([35827d7](https://github.com/ocadotechnology/codeforlife-package-javascript/commit/35827d7452023f3a1ea8723b6b31fd9b84173cdd))
+
+## [2.6.8](https://github.com/ocadotechnology/codeforlife-package-javascript/compare/v2.6.7...v2.6.8) (2025-02-24)
+
+
+### Bug Fixes
+
+* form submission behavior ([#79](https://github.com/ocadotechnology/codeforlife-package-javascript/issues/79)) ([9b1ac2d](https://github.com/ocadotechnology/codeforlife-package-javascript/commit/9b1ac2df0049cf473266798b6d210106045a86ee))
+
 ## [2.6.7](https://github.com/ocadotechnology/codeforlife-package-javascript/compare/v2.6.6...v2.6.7) (2025-02-19)
 
 

package.json

@@ -2,7 +2,7 @@
   "name": "codeforlife",
   "description": "Common frontend code",
   "private": false,
-  "version": "2.6.7",
+  "version": "2.6.10",
   "type": "module",
   "scripts": {
     "dev": "vite",

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"> & {
@@ -56,43 +56,45 @@ type BaseFormProps<Values> = Omit<FormikConfig<Values>, "children"> & {
   children: ReactNode | ((props: _FormikProps<Values>) => ReactNode)
   scrollIntoViewOptions?: ScrollIntoViewOptions
   nonFieldErrorsProps?: Omit<NonFieldErrorsProps, "children">
-  order?: Array<{ name: string; inputRef: RefObject<HTMLInputElement> }>
+  fieldRefs?: Array<{ name: string; inputRef: RefObject<HTMLInputElement> }>
 }
 
 const BaseForm = <Values extends FormValues>({
   children,
   scrollIntoViewOptions = SCROLL_INTO_VIEW_OPTIONS,
   nonFieldErrorsProps,
-  order,
+  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>
-          )
-        } else if (order && order.length) {
-          const errorNames = getKeyPaths(formik.errors)
-
-          const inputRef = order.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>

src/components/form/SubmitButton.tsx

@@ -32,7 +32,13 @@ const SubmitButton: FC<SubmitButtonProps> = ({
           type="button"
           onClick={() => {
             form.setTouched(getTouched(form.values), true).then(errors => {
-              if (!errors || !Object.keys(errors).length) form.submitForm()
+              const hasErrors = Boolean(errors && Object.keys(errors).length)
+              // If has errors, set isSubmitting=true so fields in the form are
+              // aware that a submission was attempted. Else, set
+              // isSubmitting=false as it will be set to true when calling
+              // submitForm().
+              form.setSubmitting(hasErrors)
+              if (!hasErrors) form.submitForm()
             })
           }}
           {...otherButtonProps}