codeforlife 2.6.7 → 2.6.9

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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/package.json

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

package/src/components/form/Form.tsx

@@ -56,14 +56,14 @@ 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}>
@@ -77,10 +77,12 @@ const BaseForm = <Values extends FormValues>({
               {formik.errors.non_field_errors}
             </NonFieldErrors>
           )
-        } else if (order && order.length) {
+        }
+        // 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 = order.find(({ name }) =>
+          const inputRef = fieldRefs.find(({ name }) =>
             errorNames.includes(name),
           )?.inputRef
 

package/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}