@graphcommerce/react-hook-form 6.0.1-canary.0 → 6.0.1-canary.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 6.0.1-canary.2
+
+### Patch Changes
+
+- [#1859](https://github.com/graphcommerce-org/graphcommerce/pull/1859) [`08ea612a1`](https://github.com/graphcommerce-org/graphcommerce/commit/08ea612a1d26166b8e55f20525c1004642cc85aa) - Resolved multiple onSubmitSuccessful callbacks in ComposedForm, when we have multiple ComposedForm Components on a page ([@mikekeehnen](https://github.com/mikekeehnen))
+
+## 6.0.1-canary.1
+
 ## 6.0.1-canary.0
 
 ## 6.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.1-canary.0",
+  "version": "6.0.1-canary.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -17,9 +17,9 @@
     "react-hook-form": "7.43.5"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.1-canary.0",
-    "@graphcommerce/prettier-config-pwa": "6.0.1-canary.0",
-    "@graphcommerce/typescript-config-pwa": "6.0.1-canary.0",
+    "@graphcommerce/eslint-config-pwa": "6.0.1-canary.2",
+    "@graphcommerce/prettier-config-pwa": "6.0.1-canary.2",
+    "@graphcommerce/typescript-config-pwa": "6.0.1-canary.2",
     "@testing-library/react": "^14.0.0"
   },
   "peerDependencies": {

package/src/ComposedForm/ComposedSubmit.tsx

@@ -1,5 +1,5 @@
 import { ApolloError } from '@apollo/client'
-import React, { useContext, useEffect } from 'react'
+import React, { useContext, useEffect, useRef } from 'react'
 import { isFormGqlOperation } from '../useFormGqlMutation'
 import { composedFormContext } from './context'
 import { ComposedSubmitRenderComponentProps } from './types'
@@ -22,11 +22,12 @@ export function ComposedSubmit(props: ComposedSubmitProps) {
   const { render: Render, onSubmitSuccessful } = props
   const [formContext, dispatch] = useContext(composedFormContext)
   const { formState, buttonState, isCompleting, forms } = formContext
+  const thisComponent = useRef(false)
 
   const formEntries = Object.entries(forms).sort((a, b) => a[1].step - b[1].step)
 
   useEffect(() => {
-    if (isCompleting && !formState.isSubmitting) {
+    if (isCompleting && !formState.isSubmitting && thisComponent.current) {
       /**
        * If we have forms that are invalid, we don't need to submit anything yet. We can trigger the
        * submission of the invalid forms and highlight those forms.
@@ -37,6 +38,7 @@ export function ComposedSubmit(props: ComposedSubmitProps) {
 
       dispatch({ type: 'SUBMITTED', isSubmitSuccessful })
       if (isSubmitSuccessful) onSubmitSuccessful?.()
+      thisComponent.current = false
     }
   }, [isCompleting, dispatch, formEntries, formState.isSubmitting, onSubmitSuccessful])
 
@@ -105,11 +107,12 @@ export function ComposedSubmit(props: ComposedSubmitProps) {
         }
       }
 
-      dispatch(
-        invalidKeys.length === 0
-          ? { type: 'SUBMITTING' }
-          : { type: 'SUBMITTED', isSubmitSuccessful: false },
-      )
+      if (invalidKeys.length === 0) {
+        thisComponent.current = true
+        dispatch({ type: 'SUBMITTING' })
+      } else {
+        dispatch({ type: 'SUBMITTED', isSubmitSuccessful: false })
+      }
     } catch (error) {
       dispatch({ type: 'SUBMITTED', isSubmitSuccessful: false })
     }