@graphcommerce/react-hook-form 2.102.5 → 2.102.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/react-hook-form",
-  "version": "2.102.5",
+  "version": "2.102.6",
   "sideEffects": false,
   "engines": {
     "node": "14.x"
@@ -31,5 +31,5 @@
     "react-hook-form": "^7.16.2",
     "type-fest": "^2.3.4"
   },
-  "gitHead": "f1d0e488921787f39a260c410790ec13d32c8143"
+  "gitHead": "717bd3c1658e421c247c1f8b210935cdb7780197"
 }

package/src/ComposedForm/ComposedSubmit.tsx

@@ -10,6 +10,7 @@ export type ComposedSubmitProps = {
 }
 
 export function mergeErrors(errors: ApolloError[]): ApolloError | undefined {
+  if (!errors.length) return undefined
   return new ApolloError({
     errorMessage: 'Composed submit error',
     networkError: errors.find((error) => error.networkError)?.networkError,
@@ -42,14 +43,14 @@ export default function ComposedSubmit(props: ComposedSubmitProps) {
   /** Callback to submit all forms */
   const submitAll = async () => {
     /**
-     * If we have forms that are have errors, we don't need to submit anything yet. We can trigger
-     * the submission of the invalid forms and highlight those forms.
+     * If we have forms that are have errors, we don't need to actually submit anything yet. We can
+     * trigger the submission of the invalid forms and highlight the errors in those forms.
      */
-    let formsToSubmit = formEntries.filter(
-      ([, f]) => Object.keys(f.form?.formState.errors ?? {}).length > 0,
-    )
+    let formsToSubmit = formEntries.filter(([, f]) => {
+      return Object.keys(f.form?.formState.errors ?? {}).length > 0
+    })
 
-    // We have no errors or invalid forms
+    // We have no errors and no invalid forms, this means we can submit everything.
     if (!formsToSubmit.length) formsToSubmit = formEntries
 
     dispatch({ type: 'SUBMIT' })
@@ -62,12 +63,19 @@ export default function ComposedSubmit(props: ComposedSubmitProps) {
        * Todo: There might be a performance optimization by submitting multiple forms in parallel.
        */
       let canSubmit = true
-      for (const [, { submit, form }] of formsToSubmit) {
+      for (const [, { submit, form, key }] of formsToSubmit) {
         // eslint-disable-next-line no-await-in-loop
         if (canSubmit) await submit?.()
         // eslint-disable-next-line no-await-in-loop
         if (!canSubmit) await form?.trigger()
-        if (!form?.formState.isValid || (isFormGqlOperation(form) && form.error)) canSubmit = false
+        if (form && isFormGqlOperation(form) && form.error) {
+          // console.log(
+          //   key,
+          //   form?.formState.isValid,
+          //   form && (isFormGqlOperation(form) ? form.error : undefined),
+          // )
+          canSubmit = false
+        }
       }
       dispatch({ type: 'SUBMITTING' })
     } catch (error) {

package/src/ComposedForm/reducer.ts

@@ -38,6 +38,22 @@ function updateFormStateIfNecessary(state: ComposedFormState): ComposedFormState
 }
 
 export const composedFormReducer: ComposedFormReducer = (state, action) => {
+  // if (
+  //   process.env.NODE_ENV !== 'production' &&
+  //   action.type !== 'ASSIGN' &&
+  //   action.type !== 'REGISTER'
+  // ) {
+  //   console.log(
+  //     `[composedFormReducer] ${action.type}`,
+  //     action,
+  //     Object.fromEntries(
+  //       Object.entries(state.forms).map(([k, v]) => {
+  //         return [k, v.form?.formState]
+  //       }),
+  //     ),
+  //   )
+  // }
+
   switch (action.type) {
     case 'REGISTER':
       return { ...state, forms: { ...state.forms, [action.key]: undefined } }